jQuery实现Checkbox全选功能

最新推荐文章于 2017-09-05 14:42:01 发布

犁叔

最新推荐文章于 2017-09-05 14:42:01 发布

阅读量3.7k

点赞数 3

分类专栏：前端文章标签： jquery checkbox checkAll

本文链接：https://blog.csdn.net/u012739535/article/details/46868657

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery实现勾选CheckAll时选中某一类全部的checkbox；当这一类中的checkbox有一个没有被选中，则CheckAll就不应该被勾选；如果所有的checkbox被选中，则CheckAll应被勾选。

形式如下图：

代码实现：

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#checkAll").bind("click", function () {
	        $("[name=chkItem]:checkbox").prop("checked", this.checked);
            });
 
	    $("input[name='chkItem']").click(function() {
	        var $subs = $("input[name='chkItem']");
		$("#checkAll").prop("checked",$subs.length == $subs.filter(":checked").length ? true : false);
	    });
        });
    </script>
</head>
<body>
    <div>
        CheckAll<input id="checkAll" type="checkbox" value="CheckAll" />
    </div>
    <div>
	<input name="chkItem" type="checkbox" value="Box1" />Box1
	<input name="chkItem" type="checkbox" value="Box2" />Box2
	<input name="chkItem" type="checkbox" value="Box3" />Box3
	<input name="chkItem" type="checkbox" value="Box4" />Box4
	<input name="chkItem" type="checkbox" value="Box5" />Box5
	<input name="chkItem" type="checkbox" value="Box6" />Box6
    </div>
</body>
</html>