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

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

 

一、checked属性定义

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

1、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" />。

 

本文讨论的范围为jQuery1.6+ 以上版本，现在jQuery已经到3.2.1了（2018年1月4日）！ 。开发中建议使用1.11及以上版本。

 

二、checked属性的用法

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

1、jQuery判断checked是否是选中状态的三种方法:

1.  
   .attr('checked') // 返回:"checked"或"undefined" ;
2.  
    
3.  
   .prop('checked') // 返回true/false
4.  
    
5.  
   .is(':checked')  // 返回true/false //别忘记冒号哦

2、jQuery赋值checked的几种写法:

所有的jQuery版本都可以这样赋值，不建议用attr():

1.  
   $("#cb1").attr("checked","checked"); //通用做法，现在不推荐了
2.  
    
3.  
   $("#cb1").attr("checked",true); //不标准，不推荐了
4.  
    
5.  
   $("#cb1").attr("checked","true"); //不标准，不推荐了
6.  
    
7.  
   jQuery的prop()的4种赋值（推荐如下写法）:

1.  
   $("#cb1").prop("checked",true); //标准写法，推荐！
2.  
    
3.  
   $("#cb1").prop({checked:true}); //map键值对    
4.  
    
5.  
   $("#cb1").prop("checked",function(){
6.  
    
7.  
       return true;//函数返回true或false
8.  
    
9.  
   });
10.  
     
11.  
    //$("#cb1").prop("checked","checked"); //不标准

 

三、标签中checked="checked"已有，但却不显示打勾的解决办法

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

1.  
   function check(id,check) {        
2.  
    
3.  
       if (check) {                
4.  
    
5.  
           $("." + id).find("input[type='checkbox']").attr("checked", true);        
6.  
    
7.  
       } else {                
8.  
    
9.  
           $("." + id).find("input[type='checkbox']").attr("checked", false);        
10.  
     
11.  
        }
12.  
     
13.  
    }

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

1.  
   function check(id,check) {        
2.  
    
3.  
       if (check) {                
4.  
    
5.  
           $("." + id).find("input[type='checkbox']").attr("checked", true);        
6.  
    
7.  
       } else {                
8.  
    
9.  
           $("." + id).find("input[type='checkbox']").removeAttr("checked");        
10.  
     
11.  
        }
12.  
     
13.  
    }

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

可是我都用1.11的版本了，正确的做法是使用prop()方法设置checkbox的checked属性值。 

1.  
   function check(id,check) {        
2.  
    
3.  
       if (check) {                
4.  
    
5.  
           $("." + id).find("input[type='checkbox']").prop("checked", true);        
6.  
    
7.  
       } else {                
8.  
    
9.  
           $("." + id).find("input[type='checkbox']").prop("checked", false);        
10.  
     
11.  
        }
12.  
     
13.  
    }

这个问题会出现的本质就是，jQuery中的attr()和prop()两个方法的使用区别。

具体请参考：

jQuery中的attr()与prop()设置属性、获取属性的区别 - chunlynn的小屋 - CSDN博客

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

 

四、jQuery操作checkbox技巧总结

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

1.  
   $("#chx1").find("input:checkbox:checked").val()
2.  
    
3.  
   //或者
4.  
    
5.  
   $("#chx1").find("input:[type='checkbox']:checked").val();
6.  
    
7.  
   $("#chx1").find("input[type='checkbox']:checked").val();
8.  
    
9.  
   //或者
10.  
     
11.  
    $("#chx1").find("input:[name='ck']:checked").val();
12.  
     
13.  
    $("#chx1").find("input[name='ck']:checked").val();

2、 获取多个checkbox选中项

1.  
   $("#chk1").find('input:checkbox').each(function() { //遍历所有复选框
2.  
    
3.  
       if ($(this).prop('checked') == true) {
4.  
    
5.  
           console.log($(this).val()); //打印当前选中的复选框的值
6.  
    
7.  
       }
8.  
    
9.  
   });
10.  
     
11.  
    function getCheckBoxVal(){ //jquery获取所有选中的复选框的值 
12.  
     
13.  
        var chk_value =[]; 
14.  
     
15.  
        $("#chk1").find('input[name="test"]:checked').each(function(){ //遍历，将所有选中的值放到数组中
16.  
     
17.  
            chk_value.push($(this).val()); 
18.  
     
19.  
        }); 
20.  
     
21.  
        alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value); 
22.  
     
23.  
    } 
24.  
     

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

1.  
   $("#chk1").find('input:checkbox:first').prop("checked",true);
2.  
    
3.  
   //或者
4.  
    
5.  
   $("#chk1").find('input:checkbox').eq(0).prop("checked",true);

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

$("#chk1").find('input:checkbox:last').prop("checked",true);

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

1.  
   $("#chk1").find('input:checkbox').eq(索引值).prop('checked', true);  //索引值=0,1,2.... 
2.  
    
3.  
   //或者
4.  
    
5.  
   $("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同时选中第0个和第1个checkbox

//从索引0开始（包含），到索引2（不包含）的checkbox

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

1.  
   $("#chk1").find("input:checkbox[value='1']").prop('checked',true);
2.  
    
3.  
   $("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);

7、删除checkbox：①删除value=1的checkbox ②删除第几个checkbox

1.  
   $("#chk1").find("input:checkbox[value='1']").remove(); //将匹配元素从DOM中删除，将标签从页面上删除了
2.  
    
3.  
    
4.  
   $("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....
5.  
    
6.  
   //如删除第3个checkbox:
7.  
    
8.  
   $("#chk1").find("input:checkbox").eq(2).remove();

8、全部选中或全部取消选中

1.  
   $("#chk1").find('input:checkbox').each(function() {
2.  
    
3.  
       $(this).prop('checked', true);
4.  
    
5.  
   });
6.  
    
7.  
   //或者
8.  
    
9.  
   $("#chk1").find('input:checkbox').each(function () {
10.  
     
11.  
        $(this).prop('checked',false);
12.  
     
13.  
    });

9、选中所有奇数项或偶数项

1.  
   $("#chk1").find("input[type='checkbox']:even").prop("checked",true); //选中所有偶数 
2.  
    
3.  
   $("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //选中所有奇数 
4.  
    

10、反选

方法一：

1.  
   $("#btn4").click(function(){ 
2.  
    
3.  
       $("input[type='checkbox']").each(function(){ //反选 
4.  
    
5.  
            if($(this).prop("checked")){ 
6.  
    
7.  
                $(this).prop("checked",false); 
8.  
    
9.  
             } else{ 
10.  
     
11.  
                 $(this).prop("checked",true); 
12.  
     
13.  
             } 
14.  
     
15.  
        });    
16.  
     
17.  
    }); 

方法二：

1.  
   $("#btn4").on('click',function(){ 
2.  
    
3.  
   //反选所有的复选框(没选中的改为选中，选中的改为取消选中)
4.  
    
5.  
       $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){
6.  
    
7.  
           return !oldValue;
8.  
    
9.  
       });
10.  
     
11.  
    }