JSFiddle:第2部分中的组复选框 [英] Group checkboxes in JSFiddle: Part2
本文介绍了JSFiddle:第2部分中的组复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在解决了第1部分的所有选中/取消选中的全局复选框"之后.我还有其他一些问题要解决.
After solving Part 1 for Global Checkbox for All Check/Uncheck. I have couple other issues to solve.
- 如果我未选中列表中的任何项目.不应选中自动全局(全部选中)".
- 如果我逐一检查所有项目.应该检查自动全局(全部检查)".像这样.
- If I checked all of items individually. Automatically Global (Check all) should be checked. like this.
代码
<fieldset>
<!-- these will be affected by check all -->
<div><input type="checkbox" ID="checkall1"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
<!-- these won't be affected by check all; different field set -->
<div><input type="checkbox" ID="checkall2"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
JS
$('[id^=checkall]').click(function(){
$(this).closest('fieldset').find('input').not(this).prop('checked',this.checked);
});
JSFiddle
推荐答案
注册一个回调,该回调将检查是否选中了当前组中的所有复选框
Register a callback which will check whether all the checkboxes in the current group is checked or not
$('input[id^=checkall]').click(function(){
$(this).closest('fieldset').find('input').not(this).prop('checked',this.checked);
});
$(':checkbox').not('[id^=checkall]').click(function(){
var all = $(this).closest('fieldset').find('[id^=checkall]');
var chks = $(this).closest('fieldset').find('input').not(all);
all.prop('checked', chks.length == chks.filter(':checked').length);
})
演示:小提琴
这篇关于JSFiddle:第2部分中的组复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文