JQuery操作复选框checkbox技巧总结之 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

JQuery操作复选框checkbox技巧总结之 --- 设置选中、取消选中、获取被选中的值、判断是否选中等

先了解下input标签的checked属性：

HTML <input> checked 属性

定义和用法

checked 属性是一个布尔属性。

checked 属性规定在页面加载时应该被预先选定的 <input> 元素。

checked 属性适用于 <input type="checkbox"> 和 <input type="radio">。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

HTML 4.01 与 HTML5之间的差异

无。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，checked 属性必须定义为<input checked="checked" />。

注意：操作checked、disabled、selected属性，强制建议只用prop()方法！！，不要用attr()方法。

jQuery判断checked的三种方法:

//.attr(‘checked’):  //看版本,1.6+返回:”checked”或”undefined” ;1.5-返回:true或false【不要用这个】

.prop(‘checked’)://16+:true/false

.is(‘:checked’):   //所有版本:true/false//别忘记冒号哦【优先使用这个】

jquery赋值checked的几种写法:

所有的jquery版本都可以这样赋值（不建议用attr()，用了会有问题）:

// $(“#cb1″).attr(“checked”,”checked”);

// $(“#cb1″).attr(“checked”,true);

// $(“#cb1″).attr(“checked”,"true");

jquery1.6+: prop的4种赋值:

 $(“#cb1″).prop(“checked”,true);//标准写法，很简单就不说了哦

$(“#cb1″).prop({checked:true});//map键值对    

$(“#cb1″).prop(“checked”,function(){

    return true;//函数返回true或false

});

//记得还有这种哦:$(“#cb1″).prop(“checked”,”checked”);//不建议这么写

-------------------------------------------------------------------------------------------------------------------

使用attr()设置checked属性会出问题的情况：

checkbox属性checked="checked"已有，但却不显示打勾的解决办法

在做权限管理的时候，做了一个功能，就是当勾选栏目，把所有的权限全勾上。刚开始使用了如下代码：

 function check(id,check) {        

        if (check) {                

            $("." + id).find("input[type='checkbox']").attr("checked", true);        

        } else {                

            $("." + id).find("input[type='checkbox']").attr("checked", false);        

        }

  }

第一遍勾选和取消是有效的，但是第二遍以后就没反应了，查看了属性，发现checked属性一直存在，但是没显示勾。就考虑移除checked属性看看。 

function check(id,check) {        

    if (check) {                

        $("." + id).find("input[type='checkbox']").attr("checked", true);        

    } else {                

        // $("." + id).find("input[type='checkbox']").removeAttr("checked"); //不要删除checked等固有属性，可能会报错，应该用prop()设置为false即可

        $("." + id).find("input[type='checkbox']").attr("checked",false);      

    }

}

这次看到checked属性勾上有了，取消就没了，可是问题还是没解决，还是第二遍以后就没反应了。

看Jquery手册上说1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false); 可是我都用1.10的版本了，不管那么多了，死马当活马医就用这个方法试试。 function check(id,check) {        

    if (check) {                

        $("." + id).find("input[type='checkbox']").prop("checked", true);        

    } else {                 

$("." + id).find("input[type='checkbox']").prop("checked",false);          

    }

}

写成这样，问题解决，我估计手册上说的修复只修复了一遍，之后还是会出问题，所以最保险的还是用prop。

--------------------------------------------------------------------------------------------------------------------------------------

接下来对jquery操作复选框(checkbox)的多个小技巧进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助。

1、获取单个checkbox选中项的值(三种写法)

$("input:checkbox:checked").val()

或者

$("input:[type='checkbox']:checked").val();

$("input[type='checkbox']:checked").val();

或者

$("input:[name='ck']:checked").val();

$("input[name='ck']:checked").val();

2、 获取多个checkbox选中项

$('input:checkbox').each(function() {

        if ($(this).prop('checked') ==true) {

                alert($(this).val());

        }

});

function jqchk(){ //jquery获取复选框值 

    var chk_value =[]; 

    $('input[name="test"]:checked').each(function(){ 

        chk_value.push($(this).val()); 

    }); 

    alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value); 

} 

3、设置第一个checkbox 为选中值

$('input:checkbox:first').prop("checked",true);

或者

$('input:checkbox').eq(0).prop("checked",true);

4、设置最后一个checkbox为选中值

$('input:radio:last').prop('checked', true);

5、根据索引值设置任意一个checkbox为选中值

$('input:checkbox).eq(索引值).prop('checked', true);索引值=0,1,2....

或者

$('input:checkbox').slice(1,2).prop('checked', true);//从索引0开始（包含），到索引2（不包含）的checkbox

6、选中多个checkbox同时选中第1个和第2个的checkbox

$('input:checkbox').slice(0,2).prop('checked',true);

7、根据value值设置checkbox为选中值

$("input:checkbox[value='1']").prop('checked',true);

$("input[type='checkbox'][value='1']").prop('checked',true);

8、删除value=1的checkbox

$("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).prop('checked', true);

});

12、全部取消选择

$('input:checkbox').each(function () {

        $(this).prop('checked',false);

});

13、选中所有奇数项

$("input[type='checkbox']:even").prop("checked",true); //选中所有奇数 

14、反选

方法一：

$("#btn4").click(function(){ 

     $("input[type='checkbox']").each(function(){ //反选 

          if($(this).prop("checked")){ 

              $(this).prop("checked",false); 

           } else{ 

              $(this).prop("checked",true); 

          } 

     });    

 }); 

方法二：

// 反选所有的复选框(没选中的改为选中，选中的改为取消选中)

$("input:checkbox").prop("checked", function(index, oldValue){

    return !oldValue;

});

-----------------------------------------------------------------------------------------------------------------------------

附加：

$(":button") 表示匹配所有的按钮。

$("input:checked")表示匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。

$("div.container")中的'.'号表示class， $("div #msg")中的'#'表示id。那么$(":button") 中的'：'表示类型(type),如$(":button") 表示类型为button的控件，$("input:checked")表示所有类型为选中的复选框元素。

本系列其他相关文章：

【1】jQuery中的attr()与prop()设置属性、获取属性的区别 http://blog.csdn.net/chenchunlin526/article/details/77426796

【2】<a>标签中href属性动作和onclick事件的区别以及传递this参数对 象 http://blog.csdn.net/chenchunlin526/article/details/77346049

【3】JQuery的removeProp()与removeAttr()移除属性的区别

 http://blog.csdn.net/chenchunlin526/article/details/77435722