Question

I using this code to check the checkbox in a treeview.

HTML:

<div id="tree">
    <ul>
        <li>
            <input type="checkbox"/> Root
            <ul>
                <li>
                    <input type="checkbox"/> Child 1
                    <ul>
                        <li><input type="checkbox"/> Subchild 1</li>
                        <li><input type="checkbox"/> Subchild 2</li>
                        <li><input type="checkbox"/> Subchild 3</li>
                    </ul>
                </li>
                <li>
                    <input type="checkbox"/> Child 2
                    <ul>
                        <li><input type="checkbox"/> Subchild 1</li>
                        <li><input type="checkbox"/> Subchild 2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>​

JavaScript:

$(document).ready(function() {
    $("#tree input:checkbox").change(function() {
        var val = $(this).attr("checked");
        $(this).parent().find("input:checkbox").each(function() {
            if (val) {
                $(this).attr("checked", "checked");
            } else {
                $(this).removeAttr("checked");
            }
        });
    });
});​

JSFiddle: http://jsfiddle.net/jRAcq/

this works well. But if the any one of the sub node is unchecked then the root/child root to be unchecked. How can I do this one?

Answer 1

Try this…

$(document).ready(function() {
$("#tree input:checkbox").change(function() {
    var val = $(this).attr("checked");
    $(this).parent().find("input:checkbox").each(function() {
        if (val) {
            $(this).attr("checked", "checked");
        } else {
            $(this).removeAttr("checked");
            $(this).parents('ul').each(function(){
                $(this).prev('input:checkbox').removeAttr("checked");
             });
        }
    });
});

});