Jquery中对checkbox的各种“全选”或者“取消”功能实现（特别注意1.6+的一定不能使用attr来取属性了！用prop！）

2021-07-23 17:50:27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
    </script>
    <script>
    $(document).ready(function () {
    var xsChk = 'px';//定义的样式
var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox
$(xsChkAll).each(function () {
    var name = $(this).prop("name");
    name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox
    $(this).on('click', function () {
        $(name).prop("checked", $(this)[0].checked);
    })
    var xschk = $(this);
    $(name).on('click', function () {
        var IAll = $(name).length; //此子项目下所有checkbox的个数
        var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数
        var isAllChecked = true; //是否是全选
        if (IAll != IChk) {
            isAllChecked = false;
        }
        $(xschk).prop("checked", isAllChecked);
    });
});
});
    
    </script>

        <legend>全选one</legend>
        <input type="checkbox" class="xsChk" name="chk" />
        全選
   
        <input type="checkbox" name="chk" />
        1<br />
        <input type="checkbox" name="chk" />
        2<br />
        <input type="checkbox" name="chk" />
        3<br />
        <input type="checkbox" name="chk" />
        4<br />
    
  

        <legend>全选two</legend>
        <input type="checkbox" class="xsChk" name="chk1" />
        全選2

        <input type="checkbox" name="chk1" />
        11<br />
        <input type="checkbox" name="chk1" />
        22<br />
        <input type="checkbox" name="chk1" />
        33<br />
        <input type="checkbox" name="chk1" />
        44<br />

</body>
</html>

本文修改于博客园里一个案例，现在找不到这遍文章的地址，特此说明！

学习交流群：364976091

码农公寓

相关文章