您的位置：首页 > Web前端 > JQuery

jQuery实现Checkbox全选功能

2015-07-13 22:35 891 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery checkbox checkAll

相关文章推荐

新的分享

章节导航