jQuery在收音机标签上切换类

Question

当你点击收音机/标签时，我试着在2个标签上切换“活动”类。因此，在页面加载上，将检查第一个收音机，并对该广播的标签进行类' active‘，然后如果您单击另一个收音机/标签，它将切换活动类。我差点让它起作用了，我只是做了点小错事。

​

$('.label_item input[type="radio"]').click(function() {
  if (!$(this).is(':checked')) {
    $(this).parent('.label_item').addClass('active');
  } else {
    $(this).parent('.label_item').removeClass('active');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="label_item active" for="a1">
<input type="radio" name="radio" id="a1" checked="checked" />label one</label>

<label class="label_item" for="a2">
<input type="radio" name="radio" id="a2" />label two</label>

​

JSFiddle：https://jsfiddle.net/5vnhgduh/

Answer 1

您可以将类添加到父级，并从父级兄弟姐妹中删除类。

​

$('.label_item input[type="radio"]').click(function() {
  $(this).parent().addClass('active').siblings('label').removeClass('active')
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="label_item active" for="a1">
  <input type="radio" name="radio" id="a1" checked="checked" />label one</label>

<label class="label_item" for="a2">
  <input type="radio" name="radio" id="a2" />label two</label>

​

Answer 2

您需要在active单选按钮上添加:checked类，我建议您使用change事件。

var elements = $('.label_item :radio').change(function() {
    elements  //Select radio
      .parent().removeClass('active') //target parents and remove class
      .end() //target radio options 
      .filter(':checked') //get checked radio
      .parent().addClass('active'); //add class
});

​

var elements = $('.label_item :radio').change(function() {
  elements //Select radio
    .parent().removeClass('active') //target parents and remove class
    .end() //target radio options 
    .filter(':checked') //get checked radio
    .parent().addClass('active'); //add class
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="label_item active" for="a1">
    <input type="radio" name="radio" id="a1" checked="checked" />label one</label>

<label class="label_item" for="a2">
    <input type="radio" name="radio" id="a2" />label two</label>

​

DEMO