Group checkboxes in JSFiddle: Part2 [closed]

筅森魡賤 提交于 2019-12-13 11:20:23

问题


Group checkboxes in JSFiddle : Part 1

After solving Part 1 for Global Checkbox for All Check/Uncheck. I have couple other issues to solve.

  1. If I unchecked any of the items from list. Automatically Global (Check all) should be unchecked.

  1. If I checked all of items individually. Automatically Global (Check all) should be checked. like this.

Code

 <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


回答1:


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

Demo: Fiddle



来源:https://stackoverflow.com/questions/17548627/group-checkboxes-in-jsfiddle-part2

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!