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)
}
})
<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)
}
})