Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery each() only being called once
    primarykey
    data
    text
    <p>I have multiple radio groups that have multiple selection restrictions, one is by name attribute and the other is with jQuery. For each radio group, I'm setting checked attributes to false on change so only one radio can be checked per group.</p> <p>HTML</p> <pre><code>&lt;div id="radio_group"&gt; &lt;input type="radio" name="name" value="0"/&gt;Name &lt;input type="radio" name="address" value="0"/&gt;Address &lt;input type="radio" name="phone" value="0"/&gt;Phone &lt;/div&gt; &lt;div id="radio_group"&gt; &lt;input type="radio" name="name" value="1"/&gt;Name &lt;input type="radio" name="address" value="1"/&gt;Address &lt;input type="radio" name="phone" value="1"/&gt;Phone &lt;/div&gt; </code></pre> <p>jQuery</p> <pre><code>$('#radio_group').each(function(){ var mainElement = $(this); mainElement.children('input[type=radio]').on('change', function(){ mainElement.children('input[type=radio]').not(this).prop('checked', false); }); }); </code></pre> <p>This only works with the first group, any suggestions?</p> <p>EDIT:</p> <p>Used class selector instead of id:</p> <p>HTML</p> <pre><code>&lt;div class="radio_group"&gt; &lt;input type="radio" name="name" value="0"/&gt;Name &lt;input type="radio" name="address" value="0"/&gt;Address &lt;input type="radio" name="phone" value="0"/&gt;Phone &lt;/div&gt; &lt;div class="radio_group"&gt; &lt;input type="radio" name="name" value="1"/&gt;Name &lt;input type="radio" name="address" value="1"/&gt;Address &lt;input type="radio" name="phone" value="1"/&gt;Phone &lt;/div&gt; </code></pre> <p>jQuery</p> <pre><code>$('.radio_group').each(function(){ var mainElement = $(this); mainElement.children('input[type=radio]').on('change', function(){ mainElement.children('input[type=radio]').not(this).prop('checked', false); }); }); </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.
 

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