How to Remove Active Class from a Label by Checking a Radio Input using JQuery?-CodePudding

I am editing a form in Google Optimize that has both radio input "buttons" as well as a button made from a label. I am trying to make it so that when a the "one time purchase" radio input button is clicked, the "Delivery option" label's active class is removed. I'm sure this should be fairly simple but am new to JQuery and JS and I have been struggling to figure out how to do this. Can someone please help me figure out what I'm doing wrong?

Here is what I've tried so far:

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

Here is my 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);
}

Here is my html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div  data-label="One-Time Purchase">

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

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

  </div>

  <div  data-label="Every Week">

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

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

  </div>

  <div  data-label="Every 2 Weeks">

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

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

  </div>

  <div  data-label="Every Month">

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

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

  </div>


  <div  data-label="subscribe" id="radio-subscribe"> 

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


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

CodePudding user response：

Try following:

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

CodePudding user response：

AlexGriva here. I read the ask details carefully. Understand your intention. Try the code below.

<!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 >
  <div  data-label="One-Time Purchase">

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

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

  </div>

  <div  data-label="Every Week">

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

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

  </div>

  <div  data-label="Every 2 Weeks">

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

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

  </div>

  <div  data-label="Every Month">

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

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

  </div>


  <div  data-label="subscribe" id="radio-subscribe"> 

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


    <label  for="subscribe_list">
      <strong >Delivery Option</strong>
      <span >Save 10% on every shipment in your order</span>
    </label>
  </div>
</body>
<script>
    $('input:radio').click(function () {
        $('#radio-subscribe label').toggleClass('active');
    });
</script>
</html>

Hope it helps. Looking forward to many fellowships in the future