skip to Main Content

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 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>

2

Answers


  1. 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');
     }
       });
    
    Login or Signup to reply.
  2. 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 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>

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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search