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>