Databases
StackOverflow2013
Postsdbo
POHow to use jQuery to assign a class to only one radio button in a group when user clicks on it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use jQuery to assign a class to only one radio button in a group when user clicks on it?
    text
    copied!<p>I have the following markup. I would like to add class_A to <code>&lt;p class="subitem-text"&gt;</code> (that holds the radio button and the label) when user clicks on the <code>&lt;input&gt;</code> or <code>&lt;label&gt;</code>. </p> <p>If user clicks some other radio-button/label in the same group, I would like to add class_A to this radio-button's parent paragraph and remove class_A from any other paragraph that hold radio-buttons/labels in that group. Effectively, in each <code>&lt;li&gt;</code>, only one <code>&lt;p class="subitem-text"&gt;</code> should have class_A added to it.</p> <p>Is there a jQuery plug-in that does this? Or is there a simple trick that can do this?</p> <pre><code>&lt;ul&gt; &lt;li&gt; &lt;div class="myitem-wrapper" id="10"&gt; &lt;div class="myitem clearfix"&gt; &lt;span class="number"&gt;1&lt;/span&gt; &lt;div class="item-text"&gt;Some text here &lt;/div&gt; &lt;/div&gt; &lt;p class="subitem-text"&gt; &lt;input type="radio" name="10" value="15" id="99"&gt; &lt;label for="99"&gt;First subitem &lt;/label&gt; &lt;/p&gt; &lt;p class="subitem-text"&gt; &lt;input type="radio" name="10" value="77" id="21"&gt; &lt;label for="21"&gt;Second subitem&lt;/label&gt; &lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="myitem-wrapper" id="11"&gt; &lt;div class="myitem clearfix"&gt; &lt;span class="number"&gt;2&lt;/span&gt; &lt;div class="item-text"&gt;Some other text here ... &lt;/div&gt; &lt;/div&gt; &lt;p class="subitem-text"&gt; &lt;input type="radio" name="11" value="32" id="201"&gt; &lt;label for="201"&gt;First subitem ... &lt;/label&gt; &lt;/p&gt; &lt;p class="subitem-text"&gt; &lt;input type="radio" name="11" value="68" id="205"&gt; &lt;label for="205"&gt;Second subitem ...&lt;/label&gt; &lt;/p&gt; &lt;p class="subitem-text"&gt; &lt;input type="radio" name="11" value="160" id="206"&gt; &lt;label for="206"&gt;Third subitem ...&lt;/label&gt; &lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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