javascript - 当用户单击某个单选按钮时，如何使用 jQuery 将一个类分配给一组单选按钮？

Question

我有以下标记。我想将 class_A 添加到 <p class="subitem-text"> (包含单选按钮和标签)当用户单击 <input> 时或<label> 。

如果用户单击同一组中的某些其他单选按钮/标签，我想将 class_A 添加到该单选按钮的父段落中，并从包含该组中的单选按钮/标签的任何其他段落中删除 class_A 。实际上，在每个 <li> ，只有一个<p class="subitem-text">应该添加 class_A。

是否有一个 jQuery 插件可以做到这一点？或者有一个简单的技巧可以做到这一点吗？

<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>
</ul>   

Answer 1

演示: http://jsbin.com/ebaye3

既然你把所有的东西都放在P里面了，你就可以使用它了!

$(function($) {
    $('.subitem-text').click(function() {
        $(this).parent().find('.subitem-text').removeClass('class_A');
        if ( $(this).children(':radio').is(':checked') ) // for sake! ;-)
        $(this).addClass('class_A');
    });
   //you can also write it like this:

  $('.subitem-text :radio').click(function() {
    $(this).parent().parent().children().removeClass('class_A');
    if ( $(this).is(':checked') )
    $(this).parent().addClass('class_A');
   });

});