如果选中所有子复选框，如何选中父复选框
如果选中所有子复选框，如何选中父复选框
提问于 2017-01-11 17:48:07
我想使一个独立的功能，从我的校验和取消所有按钮(我已经有一个工作)。这一次，如果选中了所有的子复选框，我希望选中我的checkall/uncheckall。
我在想，也许我可以比较一下我选中的孩子的复选框长度和孩子的复选框长度。
function testFunction() {
$('.cb').change(function(){
var checkedChildCheckBox = $('.cb:checked').length;
var numberOfChildCheckBoxes = $('.cb').length;
if (checkedChildCheckBox == numberOfChildCheckBoxes){
$("#checkAll").prop('checked', true);
}
})
}有人能给我一些想法吗？不过，我的checkall/uncheckall复选框仍未更改为选中。所提出的条件在if声明中是正确的。或者我比较长度的想法行不通？
.cb“我的孩子类”复选框#checkall #checkall id for parent或checkall/uncheckall复选框
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-11 17:58:01
它已经起作用了，我猜-问题是把事件侦听器放在一个函数中(不知道为什么会这样)。
无论如何，请参见下面的演示：
var numberOfChildCheckBoxes = $('.cb').length;
$('.cb').change(function() {
var checkedChildCheckBox = $('.cb:checked').length;
if (checkedChildCheckBox == numberOfChildCheckBoxes)
$("#checkAll").prop('checked', true);
else
$("#checkAll").prop('checked', false);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkAll">All</label>
<input type="checkbox" id="checkAll" />
<br/>
<br/>
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />
Stack Overflow用户
发布于 2017-01-11 18:05:18
Try below code
Js
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
</script>
Html
<ul class="main">
<li><input type="checkbox" id="select_all" /> Select all</li>
<ul>
<li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
<li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
<li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
<li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
<li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
</ul>
</ul>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41597444
复制相关文章
相似问题
腾讯云开发者
