如何用jQuery通过勾选单选框移除标签的active类

我正在Google Optimize中编辑一个表单，表单里既有单选输入按钮，也用label制作了按钮。需求很明确：点击「One-Time Purchase」单选按钮时，移除「Delivery option」标签的active类。我刚接触jQuery和JS，试了好几段代码都没搞定，求帮忙找出问题。

我尝试过的代码 #

代码1 #

$('input:radio').click(function () {
  if ($('.option-itemlabel[data-label="One-Time Purchase"]').is(':checked')) {
    $('#radio-subscribe label').removeClass('active');
  } else {
    $('#radio-subscribe label').addClass('active');
  }
});

代码2 #

$('input:radio').click(function () {
    $('#radio-subscribe label').removeClass("active");
     if ($(this).is(":checked")) {
       var label = $(this).attr("[data-label=One-Time Purchase]");
        $('#radio-subscribe label').addClass("active");
     }
});

代码3 #

$('input:radio').on('click', function() {
  if($(this).attr("data-label") == "One-Time Purchase"){ 
   $('#radio-subscribe label').removeClass('active');}
  
  else{
  $('#radio-subscribe label').addClass('active');
  $(this).removeClass('active');
 
   });

我的CSS代码 #

#radio-subscribe>label {
  background-color : rgb(255, 255, 255);
}

#radio-subscribe label.active {
  background-color : rgb(0, 0, 0);
  color : rgb(255, 255, 255);
}

div.delivery-flex>div:nth-of-type(n)>label {
  background-color : rgb(255, 255, 255);
}

.option-item[data-label] input[type="radio"]:checked + label {
  background-color : rgb(0, 0, 0);
  color : rgb(255, 255, 255);
}

我的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex delivery-flex">
  <div class="option-item df-radio-item" data-label="One-Time Purchase">

    <input
        data-label="One-Time Purchase"
        class="form-radio "
        type="radio"
        id="attribute_rectangle__136_182"
        name="attribute[136]"
        value="182"
        checked
        data-default
        >

        <label class="form-option" for="attribute_rectangle__136_182" data-product-attribute-value="182">
          <span class="form-option-variant">One-Time Purchase</span>
        </label>

  </div>

  <div class="option-item df-radio-item" data-label="Every Week">

    <input
        data-label="Every Week"
        class="form-radio "
        type="radio"
        id="attribute_rectangle__136_183"
        name="attribute[136]"
        value="183"
        >

        <label class="form-option" for="attribute_rectangle__136_183" data-product-attribute-value="183">
          <span class="form-option-variant">Every Week</span>
        </label>

  </div>

  <div class="option-item df-radio-item" data-label="Every 2 Weeks">

    <input
        data-label="Every 2 Weeks"
        class="form-radio "
        type="radio"
        id="attribute_rectangle__136_184"
        name="attribute[136]"
        value="184"
        >

        <label class="form-option" for="attribute_rectangle__136_184" data-product-attribute-value="184">
          <span class="form-option-variant">Every 2 Weeks</span>
        </label>

  </div>

  <div class="option-item df-radio-item" data-label="Every Month">

    <input
        data-label="Every Month"
        class="form-radio "
        type="radio"
        id="attribute_rectangle__136_185"
        name="attribute[136]"
        value="185"
        >

        <label class="form-option" for="attribute_rectangle__136_185" data-product-attribute-value="185">
          <span class="form-option-variant">Every Month</span>
        </label>

  </div>


  <div class="option-item  df-radio-item subscribe-grp disabled" data-label="subscribe" id="radio-subscribe"> 

    <input 
        data-label="Delivery Option" 
        class="form-radio " 
        type="radio" 
        id="attribute_rectangle__136_186" 
        name="attribute[136]" 
        value="186"
        >


    <label class="form-option" for="subscribe_list">
      <strong class="form-option-variant">Delivery Option</strong>
      <span class="form-option-variant">Save 10% on every shipment in your order</span>
    </label>
  </div>

解决方案 #

先分析你之前代码的问题 #

1. 第一段代码的选择器.option-itemlabel写错了，应该是.option-item label或者直接选中带data-label的input元素
2. 第二段代码里$(this).attr("[data-label=One-Time Purchase]")写法错误，attr是用来获取属性值的，不能这么写选择器
3. 第三段代码有语法错误，else块的代码没闭合，而且逻辑混乱，给当前单选按钮移除active类完全没必要

正确的jQuery代码 #

// 监听目标单选按钮的状态变化事件
$('input[name="attribute[136]"]').on('change', function() {
  const deliveryLabel = $('#radio-subscribe label');
  // 判断当前选中按钮的data-label值
  if ($(this).data('label') === 'One-Time Purchase') {
    deliveryLabel.removeClass('active');
  } else {
    deliveryLabel.addClass('active');
  }
});

代码说明 #

• 用change事件代替click，单选按钮的选中状态变化用change更准确
• 用data('label')获取data-label属性值，比attr('data-label')更高效
• 先缓存#radio-subscribe label的jQuery对象，避免重复查询DOM
• 只监听目标组的单选按钮（name为attribute[136]），减少不必要的事件触发

此提问来源于stack exchange，提问作者EMP-TAB