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

Question

我有以下标记。当用户点击

（包含单选按钮和标签）时，我想将 class_A 添加到

（包含单选按钮和标签）代码> 或<代码><标签>。

如果用户单击同一组中的某些其他单选按钮/标签，我想将 class_A 添加到该单选按钮的父段落中，并从包含该组中的单选按钮/标签的任何其他段落中删除 class_A 。实际上，在每个

中，只有一个

应添加 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');
   });

});

Answer 2

你可以这样做：

  // find all the radio inputs inside a subitem-text
  $('.subitem-text input[type=radio]').bind('change', function() {
    // find our parent LI
    var $li = $(this).closest('li'); 
    // remove any "class_A" 
    $li.find('.class_A').removeClass('class_A');
    // find the subitem with the checked input and add "class_A"
    $li.find('.subitem-text:has(input[checked])').addClass('class_A');
  });

jsbin Preview/demo

Answer 3

像这样：

$(':radio').click(function() {
    $(this).closest('ul').find('.subitem-text').removeClass('active');

    $(this).closest('.subitem-text').addClass('active');
});

Answer 4

没有固定的方法可以做到这一点，因为它依赖于文档中的 html。最简单的方法是绑定到每个无线电输入元素，但您也可以使用事件委托并绑定到 div.myitem-wrapper、li、父 ul 或事件正文标记。

只需将点击处理程序绑定到我们感兴趣的每个输入元素：

$("div.myitem-wrapper input[type=radio]").bind('change', function (event) {
    $(event.target).is(':checked').closest('p')
        .addClass('class_A')
        .siblings('p.subitem-text').removeClass('class_A');
});

同样的事情，但使用事件委托将处理程序的数量减少到一个。如果您发现要绑定到大量元素，这确实可以加快速度。

$("#id_of_the_parent_UL").bind('change', function (event) {
    var $target = $(event.target);
    if ($target.is('input[type=radio]:checked')) {
        $target.closest('p')
            .addClass('class_A')
            .siblings('p.subitem-text').removeClass('class_A');
    }
});

请注意，使用 $(this) 而不是 $(event.target) 是完全有效的，但如果您开始转向事件委托，它会给出不同的结果。另一个好处是，如果您使用 事件.target。