码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-01-08 09:27:34      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

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

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

标签:

原文地址:http://www.cnblogs.com/firstcsharp/p/4209983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!