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

怼烎@ 2021-09-19 12:20 503阅读 0赞

## 一、`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`是否是选中状态的三种方法:

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

2、jQuery赋值`checked`的几种写法:  
所有的`jQuery`版本都可以这样赋值，不建议用`attr()`:

$("#cb1").attr("checked","checked"); //通用做法，现在不推荐了
    $("#cb1").attr("checked",true); //不标准，不推荐了
    $("#cb1").attr("checked","true"); //不标准，不推荐了

jQuery的`prop()`的4种赋值（推荐如下写法）:

$("#cb1").prop("checked",true); //标准写法，推荐！
    $("#cb1").prop({ checked:true}); //map键值对 
    $("#cb1").prop("checked",function(){ 
        return true;//函数返回true或false
    });
    //$("#cb1").prop("checked","checked"); //不标准

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

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

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`属性勾上有了，取消就没了，可是问题还是没解决，还是第二遍以后就没反应了。  
可是我都用`1.11`的版本了，正确的做法是使用`prop()`方法设置`checkbox`的`checked`属性值。

function check(id,check) {         
        if (check) {                 
            $("." + id).find("input[type='checkbox']").prop("checked", true);        
        } else {                 
            $("." + id).find("input[type='checkbox']").prop("checked", false);        
        }
    }

这个问题会出现的本质就是，`jQuery`中的`attr()`和`prop()`两个方法的使用区别。  
具体请参考：  
jQuery中的`attr()`与`prop()`设置属性、获取属性的区别  
[http://blog.csdn.net/chenchunlin526/article/details/77426796][http_blog.csdn.net_chenchunlin526_article_details_77426796]

## 四、`jQuery`操作`checkbox`技巧总结 ##

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

$("#chx1").find("input:checkbox:checked").val()
    //或者
    $("#chx1").find("input:[type='checkbox']:checked").val();
    $("#chx1").find("input[type='checkbox']:checked").val();
    //或者
    $("#chx1").find("input:[name='ck']:checked").val();
    $("#chx1").find("input[name='ck']:checked").val();

2、 获取多个`checkbox`选中项

$("#chk1").find('input:checkbox').each(function() {  //遍历所有复选框
        if ($(this).prop('checked') == true) { 
            console.log($(this).val()); //打印当前选中的复选框的值
        }
    });
    function getCheckBoxVal(){  //jquery获取所有选中的复选框的值 
        var chk_value =[]; 
        $("#chk1").find('input[name="test"]:checked').each(function(){  //遍历，将所有选中的值放到数组中
            chk_value.push($(this).val()); 
        }); 
        alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value); 
    }

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

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

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

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

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

$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true);  //索引值=0,1,2.... 
    //或者
    $("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同时选中第0个和第1个checkbox
    //从索引0开始（包含），到索引2（不包含）的checkbox

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

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

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

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

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

$("#chk1").find('input:checkbox').each(function() { 
        $(this).prop('checked', true);
    });
    //或者
    $("#chk1").find('input:checkbox').each(function () { 
        $(this).prop('checked',false);
    });

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

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

10、反选  
方法一：

$("#btn4").click(function(){  
        $("input[type='checkbox']").each(function(){  //反选 
             if($(this).prop("checked")){  
                 $(this).prop("checked",false); 
              } else{  
                 $(this).prop("checked",true); 
             } 
        });    
    });

方法二：

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

[http_blog.csdn.net_chenchunlin526_article_details_77426796]: http://blog.csdn.net/chenchunlin526/article/details/77426796