Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><b><a href="http://jsfiddle.net/FRdAz/1/" rel="nofollow">Working jsFiddle Demo</a></b></p> <p>Your markup is so complex. So, the best way to make a relation between your <strong>parents</strong> and <strong>childs</strong> is using <strong>attributes</strong> instead of hierarchy of your HTML.</p> <p>Consider the following markup:</p> <pre><code>&lt;div&gt;&lt;input type="checkbox" data-rel="parent" data-id="1" /&gt;Parent 1&lt;/div&gt; &lt;div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="child" data-id="1" /&gt;Child 1.1&lt;/div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="child" data-id="1" /&gt;Child 1.2&lt;/div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="child" data-id="1" /&gt;Child 1.3&lt;/div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="child" data-id="1" /&gt;Child 1.4&lt;/div&gt; &lt;/div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="parent" data-id="2" /&gt;Parent 2&lt;/div&gt; &lt;div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="child" data-id="2" /&gt;Child 2.1&lt;/div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="child" data-id="2" /&gt;Child 2.2&lt;/div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="child" data-id="2" /&gt;Child 2.3&lt;/div&gt; &lt;div&gt;&lt;input type="checkbox" data-rel="child" data-id="2" /&gt;Child 2.4&lt;/div&gt; &lt;/div&gt; </code></pre> <p>As you can see, I make a relation between parents and child with <code>data-rel</code> and <code>data-id</code> attributes.</p> <p>Then in your jQuery code:</p> <pre><code>$(document).ready(function () { // whenever the parent checkbox changed $(':checkbox[data-rel="parent"]').on('change', function () { // get the current group by data-id attribute var id = $(this).attr('data-id'); // get childs checkboxes within the current group $(':checkbox[data-rel="child"][data-id="' + id + '"]').prop('checked', this.checked); }); }); </code></pre> <hr /> <p><b><a href="http://jsfiddle.net/CRkJG/2/" rel="nofollow">Working jsFiddle Demo</a></b></p> <p>Because you said that you can't change your markup (as it's a controller in ASP.net), here is the solution to your markup:</p> <pre><code>$(function () { $('.tree').on('change', ':checkbox', function () { var checked = this.checked; var $elem = $(this).closest('table'); var depth = $elem.find('div').length; var $childs = $elem.nextAll('table'); $childs.each(function () { var $child = $(this); var d = $child.find('div').length; if (d &lt;= depth) { return false; } $child.find(':checkbox').prop('checked', checked); }); }); }); </code></pre> <ul> <li><code>[!]</code> Don't forget to check the <a href="http://jsfiddle.net/CRkJG/2/" rel="nofollow">jsFiddle Demo</a>.</li> </ul>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload