jquery封装 [全选] 语句，简单调用即可

最新推荐文章于 2019-08-08 10:20:32 发布

吉思达

最新推荐文章于 2019-08-08 10:20:32 发布

阅读量408

点赞数

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/u012447000/article/details/48287951

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用说明：

全选框添加 checkName 属性，属性值为多选框的name属性值；

多选框 name 属性值必须相同；

功能介绍：

全选框选中时，点击后全部取消，没有选中时，点击后全部选中；

多选框单个点击，全部选中后，全选框自动选中，多选框其中一个或者多个取消选中后，全选框自动取消选中。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.8.3.js"></script>
<script language="javascript">


$(document).ready(function(e) {
    
    var checkParent = $("input[checkName]");
    
    checkParent.each(function(index, element) {
       var checkName = $(this).attr("checkName"); 
       var checkChild =  $("input[name="+checkName+"]");
       $(this).click(function(){ 
             checkChild.attr("checked",!!$(this).attr("checked"));
        }); 
                  
        checkChild.click(function(){
            var checkedNum = 0;
            var checkCount = checkChild.length;
            checkChild.each(function(index, element) {
                if ($(this).attr("checked")) {
                    checkedNum ++;
                }
            });
            if(checkedNum == checkCount){
               $("input[checkName=" + $(this).attr("name") +"]").attr("checked",true); 
            }else{
               $("input[checkName=" + $(this).attr("name") +"]").attr("checked",false); 
            }
        });
    });
});

</script>
<title>全选</title>
</head>


<body>


全选按钮<input type="checkbox"   checkName="checkChild"/>
<div>
按钮1<input type="checkbox"  name="checkChild" />
按钮2<input type="checkbox"  name="checkChild" />
按钮3<input type="checkbox"  name="checkChild" />
按钮4<input type="checkbox"  name="checkChild" />
按钮5<input type="checkbox"  name="checkChild" /> 
</div>
全选按钮<input type="checkbox"  checkName="checkChild2"/>
<div>
按钮1<input type="checkbox"  name="checkChild2" />
按钮2<input type="checkbox"  name="checkChild2" />
按钮3<input type="checkbox"  name="checkChild2" />
按钮4<input type="checkbox"  name="checkChild2" />
按钮5<input type="checkbox"  name="checkChild2" /> 
</div>
</body>
</html>

全选框添加 checkName 属性，属性值为多选框的 name 属性值；

多选框 name 属性值必须相同；

吉思达

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery封装 [全选] 语句，简单调用即可

使用说明：全选框添加 checkName 属性，属性值为多选框的name 属性值；多选框 name 属性值必须相同；功能介绍：全选框选中时，点击后全部取消，没有选中时，点击后全部选中；多选框单个点击，全部选中后，全选框自动选中，多选框其中一个或者多个取消选中后，全选框自动取消选中。$(document).
复制链接

扫一扫