第1组

Question

我有一些jquery，当选中它时，会将一个.selected类添加到单选按钮的标签中。

但我希望这可以在每组单选按钮上工作

HTML：

第1组

信用卡/借记卡

<div class="radio radio--inline">
    <label for="offline">
        <input type="radio" name="payment-option" id="offline" value="offline"> Offline Payments
    </label>
</div>

<h1>Group 2</h1>
<div class="radio radio--inline">
    <label for="credit-card1">
        <input type="radio" name="payment-option2" id="credit-card1" value="credit-card"> Credit / Debit Card
    </label>
</div>

<div class="radio radio--inline">
    <label for="offline1">
        <input type="radio" name="payment-option2" id="offline1" value="offline"> Offline Payments
    </label>
</div>

CSS：

.selected {
  border: 2px solid purple;
}

jQuery的：

$(function() {
 var $radioButtons = $('.radio input[type="radio"]');
  $radioButtons.click(function() {
   $('label').removeClass('selected');
   $(this).closest('label').addClass('selected');
 });
});

请参阅：http://jsbin.com/biciku/edit?html,css,js,output

Answer 1

每次都检查一下：

$radioButtons.click(function() {
  $("label").each(
    function(){
       var $t = $(this);
       $t[$("#" + $t.prop('for') + ':checked').length > 0 ? 'addClass' : 'removeClass']('selected');
    });
});

Answer 2

您要删除所有.selected的{{1}}。

更改此

~~$（＆＃39; label＆＃39;）。removeClass（＆＃39; selected＆＃39;）;~~

到

label

完整代码：

   $('.radio input[type="radio"]').not(':checked').parent('label').removeClass('selected');

请检查：http://jsbin.com/sogejecodi/1/edit?html,css,js,output

Answer 3

如果您更改HTML以匹配信息结构，这将变得更简洁。

更新了jsbin： http://jsbin.com/ruhamuquyo/1/edit?html,css,js,output

我将每个字段集包装在<fieldset>中并进行了一些其他小改进，例如更改点击侦听器以进行更改，并在未选定的标签周围添加透明边框以防止边框更改时出现抖动。

如何让每个选定的无线电输入保持其边界？

第1组

3 个答案: