How to Add and Remove Active Class w/ Multiple Conditions using JQuery?

EMP-TAB 0
Viewed 35

I have radio input buttons that I am trying to edit via Google Optimize. There are 2 buttons on the top row and a set of buttons below them linked to the "Delivery Option" button:

enter image description here

I am trying to make it so that when a user clicks the "Delivery Option" button, it remains active while the user toggles between the sub-menu buttons. I'd also like the "Delivery Options" button to go back to the default style once the other main menu button ("One Time Purchase") is selected.

$(document).ready(function(){
  $("#radio-subscribe label").on('click', function(){
    if($("#attribute_rectangle__136_182 label.active"));
    $('#radio-subscribe label').removeClass('active');
    $(this).addClass('active');
  });
});

When I use this script, I noticed that all of the buttons toggle properly until “One Time Purchase” button is re-selected. Once that happens, the "One Time Purchase" button becomes active, but the "Delivery Option" button stays active as well, even though I want it to go back to the default style

$(document).ready(function(){
  $(".df-radio-item label").on('click', function(){
    if($("#attribute_rectangle__136_182 label.active"));
    $('#radio-subscribe label').removeClass('active');
    $(this).addClass('active');
  });
});

When I use this script , the top 2 buttons toggle properly, but “Delivery Option” button won’t stay active while bottom row sub-menu buttons are selected

Is there a way to combine the two scripts so that everything works properly? Below is the HTML for reference. Also, sorry if this is a silly question. I'm a complete beginner...

$(document).ready(function(){
  $("#radio-subscribe label").on('click', function(){
    if($("#attribute_rectangle__136_182 label.active"));
    $('#radio-subscribe label').removeClass('active');
    $(this).addClass('active');
  });
});
<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>

jquery html
1 Answers

This demonstration might be helpful to you:

$('input[name="purchase-option"]').change(function () {
  // when the One-time Purchase or Delivery Option buttons are clicked:
  if ($('#once').is(':checked')) { // if One-Time Purchase is chosen,
    $('#delivery-options').hide(); // disable the delivery options sub-menu
  } else { // otherwise, Delivery Option is chosen,
    $('#delivery-options').show(); // enable the delivery option sub-menu
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="purchase-option" id="once"><label for="once">One-Time Purchase</label>
<input type="radio" name="purchase-option" id="subscribe" checked><label for="subscribe">Delivery Option</label>
<div id="delivery-options">
  <input type="radio" name="delivery-option" id="daily" checked><label for="daily">Daily</label>
  <input type="radio" name="delivery-option" id="weekly"><label for="weekly">Weekly</label>
  <input type="radio" name="delivery-option" id="monthly"><label for="monthly">Monthly</label>
</div>

I used my own HTML for the sake of demonstration. Add your own IDs etc. instead of copy pasting mine directly.

To detect radio buttons being clicked, you normally have to listen for .on('change' instead of .on('click'.

Of course your script can change the classes instead, depending on what you need:

$('input[name="purchase-option"]').change(function () {
  if ($('#once').is(':checked')) {
    $('#subscribe').removeClass('active');
  } else {
    $('#subscribe').addClass('active');
  }
});
theonlygusti0
Related