Check/Uncheck Parent/Child Checkboxes using Jquery

Question

I am not really that familiar with jquery or javascript and I need a quick solution to my problem that is why im posting it here. Below is a sample html snippet:

<ul>
<li><input type="checkbox" />Administration
    <ul>
        <li><input type="checkbox" />President
            <ul>
                <li><input type="checkbox" />Manager 1
                    <ul>
                        <li><input type="checkbox" />Assistant Manager 1</li>
                        <li><input type="checkbox" />Assistant Manager 2</li>
                        <li><input type="checkbox" />Assistant Manager 3</li>
                    </ul>
                </li>
                <li><input type="checkbox" />Manager 2</li>
                <li><input type="checkbox" />Manager 3</li>
            </ul>
        </li>
        <li><input type="checkbox" />Vice President
            <ul>
                <li><input type="checkbox" />Manager 4</li>
                <li><input type="checkbox" />Manager 5</li>
                <li><input type="checkbox" />Manager 6</li>
            </ul>
        </li>
    </ul>
</li>
</ul>

What I would like to do is to check everything when Administration is checked. If I uncheck President, then, his parent/s should be unchecked also together with his children leaving only the Vice President and his children checked. Similarly, if I check Manager 1 then his children should be checked also. But if I uncheck Assistant Manager 1 then Manager 1 should also be unchecked leaving only Asst. Manager 2 and 3 checked.

Take note that this list is dynamic. Meaning a child can have more children and so on.

Thanks in advance!

SO isn't a gimmie da codez site. You'll need to try something and put in a little effort first. — j08691, Mar 19 '14 at 14:17
@j08691 I figured someone would say that. It's currently on the work right now. It's just that I'm getting nowhere with my codes. Just hoping someone has already answered this before and would like to share. :) — user3360031, Mar 19 '14 at 14:32
You may also want to account for the indeterminate state of a checkbox. — j08691, Mar 19 '14 at 14:37

score 18 · Answer 1 · edited May 23 '17 at 10:34

See this: DEMO

$('li :checkbox').on('click', function () {
    var $chk = $(this),
        $li = $chk.closest('li'),
        $ul, $parent;
    if ($li.has('ul')) {
        $li.find(':checkbox').not(this).prop('checked', this.checked)
    }
    do {
        $ul = $li.parent();
        $parent = $ul.siblings(':checkbox');
        if ($chk.is(':checked')) {
            $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
        } else {
            $parent.prop('checked', false)
        }
        $chk = $parent;
        $li = $chk.closest('li');
    } while ($ul.is(':not(.someclass)'));
});

Courtesy: Uncheck parent checkbox if one child is unchecked

score 0 · Answer 2 · answered Dec 21 '20 at 08:12

   <thead>
                        <tr>
                            <th class="td10"><input type="checkbox" name="" value="" class="parentCheckBox"></th>
                            <th class="td15 invC">id</th>
                            <th class="td15 invC">Name</th>
                         
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                         
                            <tr>
                                <td class="td10"><input type="checkbox" class="childCheckBox" name="" value=""></td>
                                <td class="td15 invC">Id</td>
                                <td class="td15 invC">Name</td>
                              
                            </tr>
                        

                        </tbody>
$(document).ready(
    function() {
        
        $('input.childCheckBox').change(function() {
            $(this).closest('table`enter code here`').find('.parentCheckBox').prop('checked',
                $('input.childCheckBox').length === $('input.childCheckBox:checked').length 
            ); 
        });
        
        //clicking the parent checkbox should check or uncheck all child checkboxes
        $(".parentCheckBox").click(
            function() {
                $(this).closest('table').find('.childCheckBox').prop('checked', this.checked);
            }
        );
        //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
        $('.childCheckBox').click(
            function() {
                if ($(this).closest('table').find('.parentCheckBox').attr('checked') == true && this.checked == false)
                    $(this).closest('table').find('.parentCheckBox').attr('checked', false);
                if (this.checked == true) {
                    var flag = true;
                    $(this).closest('table').find('.childCheckBox').each(
                        function() {
                            if (this.checked == false)
                                flag = false;
                        }
                    );
                    $(this).closest('table').find('.parentCheckBox').attr('checked', flag);
                }
            }
        );
    }
    );

Check/Uncheck Parent/Child Checkboxes using Jquery

2 Answers2

Linked