jQuery 在单选按钮的标签 onclick 上切换 class

Question

我正在尝试在您单击 radio/label 时在 2 个标签上切换 'active' class。因此，在页面加载时，第一个无线电被检查并且该无线电的标签具有 class 'active' 然后如果您单击另一个 radio/label 它将切换活动 class。我几乎已经开始工作了，我只是做了一些小错误。

$('.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

您只需将 class 添加到父级并从父级的兄弟姐妹中删除 class。

$('.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

您需要在 :checked 单选按钮上添加 active class，我建议您使用 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

jQuery 在单选按钮的标签 onclick 上切换 class

jQuery toggle class on label onclick of radio

html

jquery

toggle