- 类似邮件列表里的复选框
- 要求双向联动
☛ 【实现】：
<body>
<div>
<input type="checkbox" name="checkAll">全选
</div>
<br>
<div class="cbList">
<input type="checkbox" name="cb">
<input type="checkbox" name="cb">
<input type="checkbox" name="cb">
</div>
</body>
<script>
var $ckAll = $('input[name=checkAll]'),
$cb = $('input[name=cb]'),
$cbList = $('.cbList');
$ckAll.on('click', function() {
var flag = $ckAll.prop('checked');
if (flag) {
$cb.prop('checked', true);
} else {
$cb.prop('checked', false);
}
});
$cbList.on('click', function() {
var flag = true;
$.each($cb, function(index, item) {
if (!$(item).prop('checked')) {
flag = false;
}
});
if (flag) {
$ckAll.prop('checked', true);
} else {
$ckAll.prop('checked', false);
}
});
</script>
☛ 【补充】：
(1) 判断是否选中的两种写法：
var flag = $ckAll.prop('checked');
var flag = $ckAll.is(':checked');
(2) 注意 attr 和 prop
attr：作为一个节点属性，初始化之后不会改变
prop：会随着事件而改变
.attr( "checked" ): checked
.prop( "checked" ): true
.is( ":checked" ): true