zoukankan      html  css  js  c++  java
  • Jquery操作radio,checkbox,select表单操作实现代码

    一 、Select 
    jQuery获取Select选择的Text和Value: 
    1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 
    2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 
    3. var checkValue=$("#select_id").val(); //获取Select选择的Value 
    4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 
    5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
    
    jQuery设置Select选择的Text和Value: 
    1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 
    2. $("#select_id ").val(4); //设置Select的Value值为4的项选中 
    3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
    
    jQuery添加/删除Select的Option项: 
    1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 
    2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 
    3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 
    4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 
    5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 
    6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 
    7. $("#SelectID").remove(); //删除所有项
    
    二、Checkbox 
    全选/取消 
    jQuery.attr 获取/设置对象的属性值,如: 
    $("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态(是否选中) 
    $("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true 
    $("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg' 
    $("#img_1").attr("src"); //读取ID为img_1的<img>src值 
    下面的代码是获取上面实例中选中的checkbox的value值: 
    <script type="text/javascript"> 
    var arrChk=$("input[name='chk_list'][checked]"); 
    $(arrChk).each(function(){ 
    window.alert(this.value); 
    }); 
    }); 
    </script>
    
    1,获取checkbox的value 
    $("#checkboxID").value或$("input[type='checkbox']").eq(n).attr("checked").value 
    2,设置选中项 
    $("input[type='checkbox']").eq(1).attr("checked")//设置第一个checkbox为选中的项 
    3,删除所有checkbox 
    $("input[type='checkbox']").remove() 
    4,checkbox方法 
    $(document).ready(function() { 
    var check = $("input[type='checkbox']"); 
    check.each(function(n) { 
    check.eq(n).bind("click", function() { 
    if (check.eq(n).attr("checked") != false) { 
    var value = check.eq(n).val(); 
    alert(value); 
    } 
    else { 
    alert(check.eq(n).attr("checked")); 
    } 
    }) 
    }); 
    });
    
    三、radio 
    1,获取选中的value值 
    $("input[type='radio']:checked").val(); 
    2,设置指定的项为当前选中项 
    $("input[type='radio']").eq(1).attr("checked", true);//设置第二项为选中项 
    $("input[type='radio'][value='值']").attr("checked, true");
    
    3,解决多个Radio
    
    $("input[type='radio'][@name='rdoTest2']").eq(0).attr("checked", true);
    

      

  • 相关阅读:
    vs2005发布生成自定义dll
    模拟msn消息提示(右下角)
    通过GridView导出Excel
    在ASP.NET 2.0中直接得到本页面生成的HTML代码
    asp.net实现SQL Server备份还原
    通用分页存储过程算法(.net类实现)
    超链接打开自定义的协议
    GridView技巧2
    sql语句获取本周、本月数据
    asp.net开发自定义控件
  • 原文地址:https://www.cnblogs.com/tangxueyang/p/3425462.html
Copyright © 2011-2022 走看看