Question

I’d like to automatically uncheck or check children’s checkboxes:

HTML:

<ul>
    <li>1 <input type='checkbox' /></li>
    <ul>
        <li>1.1 <input type='checkbox'' /></li>
    </ul>
    <ul>
        <li>1.1.1 <input type='checkbox' /></li>
    </ul>
</ul>

Javascript:

$('li input').change(function(){
    if($(this).is(":checked")){
        $(this).parent().next().children("li").children("input").attr("checked", true);
        console.log("checked")
    }else{
        $(this).parent().next().children("li").children("input").attr("checked", false);
        console.log("not checked")
    }
})

But it only works for the first occurence. I don’t understand why because the 1.1 change and the event change is not triggered

http://jsfiddle.net/D8ZdU/

Thanks

Answer 1

If you correct your HTML, to the following:

<ul>
    <li>1 <input type="checkbox" />
        <ul>
            <li>1.1 <input type="checkbox" />
                <ul>
                    <li>1.1.1 <input type="checkbox" /></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Then the following jQuery works:

$('input:checkbox').change(
    function(){
        var state = this.checked ? true : false;
        $(this).next('ul').find('input:checkbox').prop('checked', state);
    });​

JS Fiddle demo.

The problems with your HTML are that a ul element is not a valid child of another ul, or ol, element. The only valid children of ul (and ol) is the li element, everything else is invalid, unless it’s contained within an li.

References:

• :checkbox selector.
• find().
• prop().