jQuery traversing parent and children
<p>I have a nested unsorted list and I want to place a click event on the parent checkbox so when it is check it checks all the children checkboxes and vice versa. For some reason I can only get the selector to get all inputs of type check box... ive tried a variety or ways, this is one of them. any suggestions ?</p>

<pre><code>&lt;ul id="parent"&gt;
&lt;li&gt;
   &lt;input type='checkbox'&gt;first&lt;/input&gt;
   &lt;ul&gt;
      &lt;li&gt;&lt;input type='checkbox'&gt;child1&lt;/input&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;input type='checkbox'&gt;child2&lt;/input&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
&lt;/li&gt;

&lt;li&gt;
   &lt;input type='checkbox'&gt;second&lt;/input&gt;
   &lt;ul&gt;
      &lt;li&gt;&lt;input type='checkbox'&gt;child1&lt;/input&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;input type='checkbox'&gt;child2&lt;/input&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
&lt;/li&gt;

&lt;/ul&gt;
</code></pre>

<p>jQuery</p>

<pre><code>   $('#parent &gt; li input[type=checkbox]').click(function() {

            var parent = $(this);

            if ($(parent).is(':checked')) {
                $('li &gt; input[type=checkbox]', parent).each(function() {
                    $(this).attr('checked', true);
                });
            }
            else {
                $('li &gt; input[type=checkbox]', parent).each(function() {
                    $(this).attr('checked', false);
                });
            }
        });
</code></pre>
