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

jQuery实现一个全选复选框联动效果

2016-09-03 12:00 846 查看

类似邮件列表里的复选框

要求双向联动

☛ 【实现】：

<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

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

标签：

相关文章推荐

新的分享

章节导航