I have the following markup. I would like to add class_A to <p class="subitem-text"> (that holds the radio button and the label) when user clicks on the <input> or <label>.
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 <li>, only one <p class="subitem-text"> should have class_A added to it.
Is there a
jQuery plug-in that does this? Or is there a simple trick that can do this?
<ul>
<li>
<div class="myitem-wrapper" id="10">
<div class="myitem clearfix">
<span class="number">1</span>
<div class="item-text">Some text here </div>
</div>
<p class="subitem-text">
<input type="radio" name="10" value="15" id="99">
<label for="99">First subitem </label>
</p>
<p class="subitem-text">
<input type="radio" name="10" value="77" id="21">
<label for="21">Second subitem</label>
</p>
</div>
</li>
<li>
<div class="myitem-wrapper" id="11">
<div class="myitem clearfix">
<span class="number">2</span>
<div class="item-text">Some other text here ... </div>
</div>
<p class="subitem-text">
<input type="radio" name="11" value="32" id="201">
<label for="201">First subitem ... </label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="68" id="205">
<label for="205">Second subitem ...</label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="160" id="206">
<label for="206">Third subitem ...</label>
</p>
</div>
</li>
