如何通過使用JQuery檢查單選輸入從標簽中洗掉活動類？-有解無憂

我正在 Google Optimize 中編輯一個表單，該表單既有單選輸入“按鈕”，也有一個由標簽制成的按鈕。我正在嘗試這樣做，以便在單擊“一次性購買”單選輸入按鈕時，洗掉“交付選項”標簽的活動類。我確信這應該相當簡單，但對 JQuery 和 JS 來說是新手，我一直在努力弄清楚如何做到這一點。有人可以幫我弄清楚我做錯了什么嗎？

這是我迄今為止嘗試過的：

$('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');
  }
});

 $('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");
     }
});

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

uj5u.com熱心網友回復：

嘗試以下操作：

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

uj5u.com熱心網友回復：

亞歷克斯格里瓦在這里。我仔細閱讀了詢問詳情。了解你的意圖。試試下面的代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #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);
    }
</style>
<body>
    <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>
</body>
<script>
    $('input:radio').click(function () {
        $('#radio-subscribe label').toggleClass('active');
    });
</script>
</html>

希望能幫助到你。期待未來的許多獎學金

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527474.html

標籤：htmljQuerycss单选按钮

上一篇：如何使用js修復倒置的影像位置

下一篇：在Excel中分隔數字和文本