zoukankan      html  css  js  c++  java
  • Jquery对CheckBox, RadioButton, DropDownList取值赋值

    以下Jquery代码适query1.4版本以上

    CheckBox

      <input type="checkbox" name="ck" id="ck1" value="1" checked="checked" />
      <input type="checkbox" name="ck" id="ck2" value="2" />
      <input type="checkbox" name="ck" id="ck3" value="3" />
      <input type="checkbox" name="ck" id="ck4" value="4" />
    //1.   获取单个checkbox选中项(三种写法):
        $("input:checkbox:checked").val()   
        //或者 
        $("input:[type='checkbox']:checked").val();
        //或者 
        $("input:[name='ck']:checked").val();
    
    //2.   获取多个checkbox选中项:
        $("input:checkbox").each(function () {
            if ($(this).attr("checked") == true) {
                alert($(this).val());
            }
        });
        //或者
        $("input:checkbox").map(function () {
            return $(this).val();
        }).get().join(",");
    
    //3.   设置第一个checkbox 为选中值:
        $("input:checkbox:first").attr("checked","checked");
        //或者
        $("input:checkbox").eq(0).attr("checked","true");
    
    //4.   设置最后一个checkbox为选中值:
        $("input:radio:last").attr("checked", "checked");
        //或者
        $("input:radio:last").attr("checked", "true");
    
    //5.   根据索引值设置任意一个checkbox为选中值:
        $("input:checkbox).eq(索引值).attr("checked", "true");索引值=0,1,2….
        //或者
        $("input:radio").slice(1,2).attr("checked", "true");
    
    //6.   选中多个checkbox:
        //同时选中第1个和第2个的checkbox:
        $("input:radio").slice(0,2).attr("checked","true");
    
    //7.   根据Value值设置checkbox为选中值:
        $("input:checkbox[value='1']").attr("checked",'true");
    
    //8.   删除Value=1的checkbox:www.2cto.com
        $("input:checkbox[value='1']").remove();
    
    //9.   删除第几个checkbox:
        $("input:checkbox").eq(索引值).remove();//索引值=0,1,2….
        //如删除第3个checkbox:
        $("input:checkbox").eq(2).remove();
    
    //10.遍历checkbox:
        $("input:checkbox").each(function (index, domEle) {
        //写入代码
        });
    
    //11.全部选中
        $("input:checkbox").each(function() {
            $(this).attr("checked", true);
        });
    
    //12.全部取消选择:
        $("input:checkbox").each(function () {
            $(this).attr("checked",false);
        });

    Radio

      <input type="radio" name="rd" id="rd1" value="rd1" cherded="cherded" />
      <input type="radio" name="rd" id="rd2" value="rd2" />
      <input type="radio" name="rd" id="rd3" value="rd3" />
      <input type="radio" name="rd" id="rd4" value="rd4" />
    //1.获取选中值,三种方法都可以:
        $("input:radio:checked").val();
        $("input[type='radio']:checked").val();
        $("input[name='rd']:checked").val();
    
    //2.设置第一个Radio为选中值:
        $("input:radio:first").attr("checked", "checked");
        //或者
        $("input:radio:first").attr("checked", "true");
        //注:attr("checked","checked")= attr("checked", "true")= attr("checked", true)
    
    //3.设置最后一个Radio为选中值:
        $("input:radio:last").attr("checked", "checked");
        //或者
        $("input:radio:last").attr("checked", "true");
    
    //4.根据索引值设置任意一个radio为选中值:
        $("input:radio").eq(索引值).attr("checked", "true");索引值=0,1,2….
        //或者
        $("input:radio").slice(1,2).attr("checked", "true");
    
    //5.根据Value值设置Radio为选中值
        $("input:radio[value='rd2']").attr("checked","true");
        //或者
        $("input[value='rd2']").attr("checked","true");
    
    //6.删除Value值为rd2的Radio
        $("input:radio[value='rd2']").remove();
    
    //7.删除第几个Radio
        $("input:radio").eq(索引值).remove();//索引值=0,1,2….
        //如删除第3个Radio:$("input:radio").eq(2).remove();
    
    //8.遍历Radio
        $("input:radio").each(function(index,domEle){
        //写入代码
        });

    DropDownList

    <select id="sel">
      <option value="1" selected="selected">a</option>
      <option value="2">b</option>
      <option value="3">c</option>
      <option value="4">d</option>
      <option value="5">e</option>
    </select>
    //1.   获取选中项:
        //获取选中项的Value值:
        $("select#sel option:selected").val();
        //或者
        $("select#sel").find("option:selected").val();
        //获取选中项的Text值:
        $("select#seloption:selected").text();
        //或者
        $("select#sel").find("option:selected").text();
    
    //2.   获取当前选中项的索引值:
        $("select#sel").get(0).selectedIndex;
    
    //3.   获取当前option的最大索引值:
        $("select#sel option:last").attr("index")
    
    //4.   获取DropdownList的长度:
        $("select#sel")[0].options.length;
        //或者
        $("select#sel").get(0).options.length;
    
    //5.  设置第一个option为选中值:
        $("select#sel option:first").attr("selected","true")
        //或者
        $("select#sel")[0].selectedIndex = 0;
    
    //6.   设置最后一个option为选中值:
        $("select#sel option:last").attr("selected","true")
    
    //7.   根据索引值设置任意一个option为选中值:
        $("select#sel")[0].selectedIndex =索引值;//索引值=0,1,2….
    
    //8.   设置Value=4 的option为选中值:
        $("select#sel").attr("value","4");
        //或者
        $("select#sel option[value='4']").attr("selected", "true");
    
    //9.   删除Value=3的option:
        $("select#sel option[value='3']").remove();
    
    //10.删除第几个option:
        $(" select#sel option ").eq(索引值).remove();//索引值=0,1,2….
        //如删除第3个Radio:
        $(" select#sel option ").eq(2).remove();
    
    //11.删除第一个option:
        $(" select#sel option ").eq(0).remove();
        //或者
        $("select#sel option:first").remove();
    
    //12. 删除最后一个option:
        $("select#sel option:last").remove();
    
    //13. 删除dropdownlist:
        $("select#sel").remove();
    
    //14.在select后面添加一个option:
        $("select#sel").append("<option value='6'>f</option>");
    
    //15. 在select前面添加一个option:
        $("select#sel").prepend("<option value='0'>0</option>");
    
    //16. 遍历option:
        $(" select#sel option ").each(function (index, domEle) {
        //写入代码
        });
  • 相关阅读:
    根据访问属性进行差异化数据加载
    前人挖坑,后人填坑
    也让盲人拥抱互联网
    谈谈D2
    Android数据库大批量数据插入优化
    framework中编译anroid工程并在模拟器上运行
    简单JNI使用demo
    解决javah生成c头文件时找不到android类库的问题
    JNI的native代码中打印日志到eclipse的logcat中
    Android.mk简介<转>
  • 原文地址:https://www.cnblogs.com/fm168/p/2812829.html
Copyright © 2011-2022 走看看