CheckAll CheckBox Jquery
<p>I using this code to check the checkbox in a treeview.</p>

<p><em>HTML:</em></p>

<pre><code>&lt;div id="tree"&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;input type="checkbox"/&gt; Root
            &lt;ul&gt;
                &lt;li&gt;
                    &lt;input type="checkbox"/&gt; Child 1
                    &lt;ul&gt;
                        &lt;li&gt;&lt;input type="checkbox"/&gt; Subchild 1&lt;/li&gt;
                        &lt;li&gt;&lt;input type="checkbox"/&gt; Subchild 2&lt;/li&gt;
                        &lt;li&gt;&lt;input type="checkbox"/&gt; Subchild 3&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;input type="checkbox"/&gt; Child 2
                    &lt;ul&gt;
                        &lt;li&gt;&lt;input type="checkbox"/&gt; Subchild 1&lt;/li&gt;
                        &lt;li&gt;&lt;input type="checkbox"/&gt; Subchild 2&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;​
</code></pre>

<p><em>JavaScript:</em></p>

<pre><code>$(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");
            }
        });
    });
});​
</code></pre>

<p><em>JSFiddle:</em> <a href="http://jsfiddle.net/jRAcq/" rel="nofollow">http://jsfiddle.net/jRAcq/</a></p>

<p>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?</p>
