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()......

       }
    }
 }

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()......

       }
    }
 }

• javascript
• jquery
• html

Share Follow edited Jan 22, 2010 at 18:30 Gabe asked Jan 22, 2010 at 17:39 GabeGabe 50.5k2929 gold badges145145 silver badges182182 bronze badges 3

• Why are you setting a css color when trying to check the parent checkbox? Is this just for testing to see if the selector worked? – KP. Commented Jan 22, 2010 at 17:43
• You will also want to update your input controls. You should have the attribute type="checkbox" in them. Most browsers will not work right without this. FF3 for example shows your current markup as all textboxes, not checkboxes. – KP. Commented Jan 22, 2010 at 17:56
• oops, sorry i just madea simple example rather than copy and pasting all my code.... i have the type in my actual code :) – Gabe Commented Jan 22, 2010 at 18:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

This will work, based on your structure:

$(child).parent().parent().prev().attr('checked', true);

or

$(child).closest('ul').prev().attr('checked', true);;