收音机标签上的jQuery切换类答案

【问题标题】：jQuery toggle class on label onclick of radio收音机标签上的jQuery切换类
【发布时间】：2017-02-17 22:25:46
【问题描述】：

当您单击单选/标签时，我正在尝试在 2 个标签上切换“活动”类。因此，在页面加载时，第一个收音机被选中，并且该收音机的标签具有“活动”类，然后如果您单击另一个收音机/标签，它将切换活动类。我几乎可以正常工作了，我只是做错了一些事情。

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

【问题讨论】：

标签： jquery html toggle

【解决方案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>

【讨论】：

你也可以用:radio代替input[type="radio"]

【解决方案2】：

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

【讨论】：