Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>ID</strong> in a HTML page is <strong>unique</strong>..</p> <p>So when you are trying to select Multiple id's , because the ID is unique , it stops the search after encountering the first ID element.. That's the reason only the first is being checked</p> <p>So you need to modify you selector.. Also you do not need the $.each iterator to get this working .. try this</p> <pre><code>$(this).closest('tr').nextAll('tr').find('input').prop('checked', true); </code></pre> <p>Try this code.. <strong>JS</strong></p> <pre><code>var elementName = 'TestName' ; $('input[familyname="TestName"]').on('click', function() { if ($("input[familyname='" + elementName + "']").is(':checked')) { $(this).closest('tr').nextAll('tr').find('input').prop('checked', true); } else { $(this).closest('tr').nextAll('tr').find('input').prop('checked', false); } });​ </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;table&gt; &lt;tr class="gridSubHeader1"&gt; &lt;td colspan="6"&gt;&lt;input type="checkbox" familyname="TestName" /&gt;EB - Autonomy&lt;/td&gt; &lt;/tr&gt; &lt;tr class="gridSubHeader1" rowID="1000748"&gt; &lt;td class="formBodyOddRow" width="20"&gt;1&amp;nbsp;&lt;/td&gt; &lt;td class="formBodyOddRow" width="30"&gt;&lt;input type="Checkbox" id="Select" name="Select" unchecked="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="gridSubHeader1" rowID="1000749"&gt; &lt;td class="formBodyEvenRow" width="20"&gt;2&amp;nbsp;&lt;/td&gt; &lt;td class="formBodyEvenRow" width="30"&gt;&lt;input type="Checkbox" id="Select" name="Select" unchecked="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="gridSubHeader1" rowID="1000750"&gt; &lt;td class="formBodyOddRow" width="20"&gt;3&amp;nbsp;&lt;/td&gt; &lt;td class="formBodyOddRow" width="30"&gt;&lt;input type="Checkbox" id="Select" name="Select" unchecked="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="gridSubHeader1" rowID="237"&gt; &lt;td class="formBodyEvenRow" width="20"&gt;4&amp;nbsp;&lt;/td&gt; &lt;td class="formBodyEvenRow" width="30"&gt;&lt;input type="Checkbox" id="Select" name="Select" unchecked="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p><code>I have removed the ID from your table</code>. Make sure they are Unique on the page</p> <p>Also this line can be </p> <pre><code>if ($("input[familyname='" + elementName + "']").is(':checked')) </code></pre> <p><strong>// replaced with</strong></p> <pre><code>if ($(this).is(':checked')) </code></pre> <p><strong><a href="http://jsfiddle.net/sushanth009/macTj/1/" rel="nofollow">CHECK FIDDLE</a></strong></p> <p><strong>EDITED</strong></p> <p>This is the code with the eventHandler defined in the HTML itself..</p> <pre><code>&lt;table&gt; &lt;tr class="gridSubHeader1"&gt; &lt;td colspan="6"&gt;&lt;input type="checkbox" familyname="TestName" onclick="javascript:HandleClick('TestName');" /&gt;EB - Autonomy&lt;/td&gt; &lt;/tr&gt; &lt;tr class="gridSubHeader1" rowID="1000748"&gt; &lt;td class="formBodyOddRow" width="20"&gt;1&amp;nbsp;&lt;/td&gt; &lt;td class="formBodyOddRow" width="30"&gt;&lt;input type="Checkbox" id="Select" name="Select" unchecked="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="gridSubHeader1" rowID="1000749"&gt; &lt;td class="formBodyEvenRow" width="20"&gt;2&amp;nbsp;&lt;/td&gt; &lt;td class="formBodyEvenRow" width="30"&gt;&lt;input type="Checkbox" id="Select" name="Select" unchecked="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="gridSubHeader1" rowID="1000750"&gt; &lt;td class="formBodyOddRow" width="20"&gt;3&amp;nbsp;&lt;/td&gt; &lt;td class="formBodyOddRow" width="30"&gt;&lt;input type="Checkbox" id="Select" name="Select" unchecked="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="gridSubHeader1" rowID="237"&gt; &lt;td class="formBodyEvenRow" width="20"&gt;4&amp;nbsp;&lt;/td&gt; &lt;td class="formBodyEvenRow" width="30"&gt;&lt;input type="Checkbox" id="Select" name="Select" unchecked="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script language="javascript" type="text/javascript"&gt; function HandleClick(elementName) { var $checkBox = $("input[familyname='" + elementName + "']") ; if ($checkBox.is(':checked')) { $checkBox.closest('tr').nextAll('tr').find('input').prop('checked', true); } else { $checkBox.closest('tr').nextAll('tr').find('input').prop('checked', false); } } &lt;/script&gt;​ </code></pre>
    singulars
    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. This table or related slice is empty.
    1. 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