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

简介: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
<!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
相关文章
|
4月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
55 6
|
3月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
66 5
|
4月前
|
存储 JavaScript 前端开发
jQuery 对属性的操作
【10月更文挑战第8天】
|
5月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery - 获取内容和属性
38 5
|
5月前
|
JavaScript IDE 开发工具
jQuery - 获取内容和属性2
jQuery - 获取内容和属性2
28 3
|
5月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
70 2
|
5月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
69 14
|
5月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery - 获取内容和属性
77 12
|
前端开发 JavaScript
jquery里prop和attr的区别
  本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法。 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可以用来获取或生成“直接写在html标签里的属性” prop可以用来获取元素的JS属性,如scrollHeight,offsetHeight等。
1467 0