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

来源：互联网发布：淘宝照片怎么拍好看编辑：程序博客网时间：2024/06/10 04:07

使用说明：

全选框添加 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