If input field is checked, add css class

Question

I'm displaying variable prices, but I only want to display the price of a selected/choosen one.

My code as follows: Variable prices with input field inside a dropdown menu

<ul>
<li class="km-price-options" id="price_option_115_ssize">
    <label>
    <input type="radio" name="options[price_id][]" id="price_option_115_1" class="price_option_115" value="1" data-price="9.95">
    <span>S Size</span> 
    </label>
</li>
<li class="km-price-options" id="price_option_115_msize">
    <label>
    <input type="radio" checked="checked" name="options[price_id][]" id="price_option_115_2" class="price_option_115" value="2" data-price="19.25">
    <span>M Size</span> 
    </label>
</li>

<li class="km-price-options" id="price_option_115_xsize">
    <label>
    <input type="radio" name="options[price_id][]" id="price_option_115_3" class="price_option_115" value="3" data-price="99.50">
    <span>X Size</span> 
    </label>
</li>
...
</ul>

Elsewhere on the page the prices

<div class="km-item-price"> 

<div class="km-price km-price-option-1">
    <div class="km-item-price">$9.95</div>
</div>

<div class="km-price km-price-option-2 checked">
    <div class="km-item-price">$19.25</div>
</div>

<div class="km-price km-price-option-3">
    <div class="km-item-price">$99.50</div>
</div>

...

</div>

By default option 2 is checked. When e.g. option 1 is selected inside the dropdown menu, I want the checked class be removed from km-price-option-2 and added inside km-price-option-1. Same for the imput field checked="checked".

So far my jquery code is as follows:

$('input:radio').change(function(){
    if($(this).is(":checked")) {
        $('.km-price').addClass("checked");
    } else {
        $('.km-price').removeClass("checked");
    }
});

This will add a checked class name on all divs with the name km-price. But it should be limited to a value="1" (input). Is this possible with jquery? If yes, how? If there's a better way, I'm all ears. :)

Barmar · Accepted Answer · 2016-11-04 18:48:02Z

2

Append the value of the radio button to the class you want to add the checked class to.

$('input:radio').click(function(){
    $('.km-price').removeClass("checked");
    $('.km-price-option-' + this.value).addClass("checked");
});

Since it's a radio button, you don't need to test $(this).is(":checked"). The button you click on is always the one that's checked.

answered Nov 4, 2016 at 18:48

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erik Philips · Accepted Answer · 2016-11-04 18:59:16Z

1

Take a moment and read Decoupling Your HTML, CSS, and JavaScript.

Html:

<input type="radio" 
       name="options[price_id][]" 
       id="price_option_115_3" 
       class="price_option_115 js-update-checked" 
       value="3" 
       data-price="99.50"
       data-target=".km-price-option-3">

jQuery:

$('.js-update-checked').on("click", function(){
  $('.km-price').removeClass("checked");
  var selector = $(this).data("target");
  $(selector).addClass("checked");
});

Now adding new radio buttons to the page doesn't cause weird things to happen to this set of radio buttons. It's also now completely reusable and extensible.

answered Nov 4, 2016 at 18:59

Erik Philips

54.8k11 gold badges133 silver badges158 bronze badges

Comments

Mamdouh Saeed · Accepted Answer · 2016-11-04 19:15:39Z

Here is example based on .index() and using :eq().

$('input:radio').change(function() {
  $('.km-price').removeClass("checked");
  $('.km-price:eq(' + $(this).index('input:radio') + ')').addClass("checked");
});

.checked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="km-price-options" id="price_option_115_ssize">
    <label>
      <input type="radio" name="options[price_id][]" id="price_option_115_1" class="price_option_115" value="1" data-price="9.95">
      <span>S Size</span> 
    </label>
  </li>
  <li class="km-price-options" id="price_option_115_msize">
    <label>
      <input type="radio" checked="checked" name="options[price_id][]" id="price_option_115_2" class="price_option_115" value="2" data-price="19.25">
      <span>M Size</span> 
    </label>
  </li>

  <li class="km-price-options" id="price_option_115_xsize">
    <label>
      <input type="radio" name="options[price_id][]" id="price_option_115_3" class="price_option_115" value="3" data-price="99.50">
      <span>X Size</span> 
    </label>
  </li>
</ul>

<div class="km-item-price">

  <div class="km-price km-price-option-1">
    <div class="km-item-price">$9.95</div>
  </div>

  <div class="km-price km-price-option-2 checked">
    <div class="km-item-price">$19.25</div>
  </div>

  <div class="km-price km-price-option-3">
    <div class="km-item-price">$99.50</div>
  </div>
</div>

Collectives™ on Stack Overflow

If input field is checked, add css class

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related