Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I hope you don't mind but I created a <a href="http://jsfiddle.net/8q6M6/" rel="nofollow">jsFiddle Abstraction</a> for ensuring all children being checked toggles the parent to checked, rather than modifying your code exactly to give you an idea of one approach you might use.</p> <pre><code>&lt;div class="parentDiv"&gt; &lt;input type="checkbox" class="parent"/&gt; &lt;div class="childGroup"&gt; &lt;input type="checkbox" class="child"/&gt; &lt;input type="checkbox" class="child"/&gt; &lt;input type="checkbox" class="child"/&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Then you can use this jQuery to ensure your parent selects/deselects when the child group changes.</p> <pre><code>$('.child').on('change', function () { var $parent = $(this).closest('.parentDiv').find('input.parent'), $childCheckboxes = $(this).closest('.childGroup').find('.child'); if ( $childCheckboxes.length === $childCheckboxes.filter(':checked').length ) { $parent.prop('checked', true); } else { $parent.prop('checked', false); } }); </code></pre> <p>and to <a href="http://jsfiddle.net/5xbcu/" rel="nofollow">toggle all children on parent toggle</a>:</p> <pre><code>$('.parent').on('change', function () { var $children = $(this).closest('.parentDiv').find('.child'); $children.prop('checked', $(this).is(':checked')); }); </code></pre> <p>Per your request, I've tried to put this into the context of your check_subgroups function:</p> <pre><code>function check_subgroups(parent_id, class_name) { $parent = $('#' + parent_id); $childCheckboxes = $('.' + $.trim(class_name)); $childCheckboxes.prop('checked', $parent.is(':checked')); } </code></pre> <p>And to toggle the parent when all children are selected: </p> <pre><code>function uncheck_main_group(parent_id) { var $parent = $('#' + parent_id); var $children = $('.class_' + $.trim(parent_id)); if ( $children.length === $children.filter(':checked').length ) { $parent.prop('checked', true); } else { $parent.prop('checked', false); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload