Selecting Parent Checkboxes
<p>I have a page that has a tree structure that has no limit to the number of levels it has. Each level has a tick box I need to be able to allow users to tick which levels they are interested in. If a user clicks on a level then all of the parent levels for that child need to be selected. Also if the parent check box is unticked then all child levels should be unticked.</p>

<p>I tried writing the code below which kind of works however if I click the child it will tick the parent and grandparent but leave the child unselected. I am also unable to unselect items as every-time I select a box it always selects it again. </p>

<p>I keep trying to make changes to the code and have ideas but I think I am going down the wrong direction and wanted to know if there are better solutions available for what I am trying to achieve. Here is the code:</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;Check Box&lt;/title&gt;
        &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
        &lt;script language="javascript"&gt;
            $(document).ready(function () {
                $(".test").click(function (event) {
                    event.preventDefault();
                });
            });

            function set_checked(id, checked) {
                $("#ID_" + id).attr("checked", checked)
                alert(id);
            }

            function CheckMe(id) {
                var IDS = id.replace("ID_", "");
                var IDS = IDS.split('_');
                for (i = 0; i &lt; IDS.length; i++) {
                    set_checked(IDS[i], true);
                }
            }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;form&gt;
                &lt;p&gt;
                    &lt;input name="ID" type="checkbox" id="ID_123" value="123" onClick="CheckMe('ID_123')" class="test"&gt;Grandparent
                    &lt;br&gt;
                    &lt;input name="ID" type="checkbox" id="ID_124" value="124" onClick="CheckMe('ID_123_124')"class="test"&gt;Parent
                    &lt;br&gt;
                    &lt;input name="ID" type="checkbox" id="ID_125" value="125" onClick="CheckMe('ID_123_124_125')"class="test"&gt;Child
                &lt;/p&gt;
                &lt;p&gt;
                    &lt;input type="submit" name="button" id="button" value="Submit"&gt;
                &lt;/p&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I used jQuery <code>PreventDefault</code> to stop the default actions of the checkbox. I would be most grateful for any direction with this.</p>

<p>Edit:</p>

<p>Here are the options within an unordered list. My example above was misleading as it only had three options as I was trying to test clicking the bottom option and having the parent options clicked without considering that there would be multiple trees.  </p>

<pre><code>&lt;form action="" method="get" id="test"&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;input type="checkbox" name="ID" value="1"&gt;
&lt;label&gt;Level 1&lt;/label&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="2"&gt;&lt;label&gt;Level 1.1&lt;/label&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="3"&gt;&lt;label&gt;Level 1.1.1&lt;/label&gt;
&lt;/ul&gt;
&lt;/ul&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="4"&gt;&lt;label&gt;Level 1.2&lt;/label&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="5"&gt;&lt;label&gt;Level 1.2.1&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="6"&gt;&lt;label&gt;Level 1.2.2&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="7"&gt;&lt;label&gt;Level 1.2.3&lt;/label&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="8"&gt;&lt;label&gt;Level 1.2.3.1&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="9"&gt;&lt;label&gt;Level 1.2.3.2&lt;/label&gt;
&lt;/ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="10"&gt;&lt;label&gt;Level 1.2.4&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="11"&gt;&lt;label&gt;Level 1.2.5&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="12"&gt;&lt;label&gt;Level 1.2.6&lt;/label&gt;
&lt;/ul&gt;
&lt;/ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="13"&gt;&lt;label&gt;Level 2&lt;/label&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="14"&gt;&lt;label&gt;Level 2.1&lt;/label&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="15"&gt;&lt;label&gt;Level 2.1.1&lt;/label&gt;
&lt;/ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="16"&gt;&lt;label&gt;Level 2.2&lt;/label&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="16"&gt;&lt;label&gt;Level 2.2.1&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="17"&gt;&lt;label&gt;Level 2.2.2&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="18"&gt;&lt;label&gt;Level 2.2.3&lt;/label&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="19"&gt;&lt;label&gt;Level 2.2.3.1&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="20"&gt;&lt;label&gt;Level 2.2.3.2&lt;/label&gt;
&lt;/ul&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="21"&gt;&lt;label&gt;Level 2.2.4&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="22"&gt;&lt;label&gt;Level 2.2.5&lt;/label&gt;
&lt;li&gt;&lt;input type="checkbox" name="ID" value="23"&gt;&lt;label&gt;Level 2.2.6&lt;/label&gt;
&lt;/ul&gt;
&lt;/ul&gt;
&lt;/ul&gt;
&lt;input name="Submit" type="submit" id="Button" value="Submit"&gt;
&lt;/form&gt;
</code></pre>
