jq实现复选框全选和反全选以及子复选框的状态改变父复选框状态的方法

最新推荐文章于 2024-05-18 20:34:17 发布

原创最新推荐文章于 2024-05-18 20:34:17 发布 · 841 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#复选框 #jq #前端

日常开发同时被 2 个专栏收录

42 篇文章

订阅专栏

功能实现

34 篇文章

订阅专栏

本文介绍了一种使用jQuery实现复选框联动的方法。具体包括如何让子复选框的状态变化影响父复选框的状态，以及如何通过父复选框控制所有子复选框的全选与反全选。

html代码如下所示：
<div>
<label>
<input type="checkbox" id="checkbox_a1">父input
</label>
</div>
<div id="chkList_1">
<label>
<input type="checkbox">子input1
</label>
<label>
<input type="checkbox">子input2
</label>
<label>
<input type="checkbox">子input3
</label>
</div>
jq代码如下所示：
1：实现子复选框的状态改变父复选框状态的方法：原理是在点击子复选框时通过判断子复选框选中状态的个数来控制复选框的状态
$('#chkList_1 input').change(function(){
var num = $('#chkList_1 input').map(function(){
var a = $(this).prop('checked')
if (a) {return a}
})
// alert(num.length)
if (num.length==0) {
$('#checkbox_a1').prop('checked',false)
}else{
$('#checkbox_a1').prop('checked',true)
}
})
2：实现通过父复选框实现全选和反全选：原理是通过父复选框的change事件来判断父复选框的选中状态从而改变子复选框的状态
$('#checkbox_a1').change(function(){
if ($(this).prop('checked')) {
$('#chkList_1 input').prop('checked',true)
}else{
$('#chkList_1 input').prop('checked',false)
}
})