Question

Basically I am trying to write a js func that if I check a child checkbox the parent checkbox also checks, if not already checked. I am using jquery here is my html:

      <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
            <li style="margin: 0 0 5px 0;">
                <input type="checkbox" checked="checked" class="liParent" id="p1" />Parent1
                <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
                    </li>
                </ul>
            </li>

            <li style="margin: 0 0 5px 0;">
                <input type="checkbox" checked="checked" class="liParent" id="p2" />Parent2
                <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
                    </li>
                </ul>
            </li>
</ul>

JS Func

function checkParent(child){

if (child != null) {

    // if child is checked we need to check the parent category       
    if (child.checked) {
    // get the parent checkbox and check it if not check....need help here....
           $(child).parent().parent().parent()......

       }
    }
 }

Answer 1

I’d remove the inline javascript in your HTML and use jQuery binding to bind the check event:

$(document).ready(function() {
    $('input.liChild').change(function() {
        if ($(this).is(':checked')) {
            $(this).closest('ul').siblings('input:checkbox').attr('checked', true);
        }
    });
});

This will bind the event you’re looking for to any input with the class liChild automatically without all those onclicks.