Henk Z Henk Z - 6 months ago 185
jQuery Question

jQuery add class to selected radio buttons with specific label

I currently use jQuery to add/remove a class when a radio button is selected.
The problem is that it checks all radio buttons, so it only adds css to 1 radio button.

But in my HTML I use a row of 3 or 5 columns, where the class may only be added to 1 of the 3/5 columns.
But it should be also allowed in the next row, to add a class to 1 radio button if checked.

How can I achieve that?

jQuery:

<script>
jQuery(".checkbox-radio").change(function() {
$(".option").removeClass("selected");
if ($(this).is(':checked')){
$(this).closest(".option").addClass("selected");
}
else
$(this).closest(".option").removeClass("selected");
});
</script>


HTML:

<span class="option">
<label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="21" onclick="prodconfrecalcsummary()">
<i class="icon-addon"></i>
<span class="addon-qty"></span>
<span class="addon-text">Text</span>
<span class="addon-price">Text</span>
</label>
</span>

<span class="option">
<label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="22" onclick="prodconfrecalcsummary()">
<i class="icon-addon"></i>
<span class="addon-qty"></span>
<span class="addon-text">Text</span>
<span class="addon-price">Text</span>
</label>
</span>

<span class="option">
<label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="23" checked="checked" onclick="prodconfrecalcsummary()">
<i class="icon-addon"></i>
<span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price">Text</span>
</label>
</span>



<span class="option">
<label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="17" onclick="prodconfrecalcsummary()">
<i class="icon-addon"></i>
<span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price">Text</span>
</label>
</span>
<span class="option">
<label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="1" onclick="prodconfrecalcsummary()">
<i class="icon-addon"></i>
<span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price"> Text </span>
</label>
</span>
<span class="option">
<label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="2" onclick="prodconfrecalcsummary()">
<i class="icon-addon"></i>
<span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price"> Text </span>
</label>
</span>
<span class="option">
<label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="3" checked="checked" onclick="prodconfrecalcsummary()">
<i class="icon-addon"></i>
<span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price"> Text </span>
</label>
</span>
<span class="option">
<label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="4" onclick="prodconfrecalcsummary()">
<i class="icon-addon"></i>
<span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price"> Text </span>
</label>
</span>

Answer

If my understanding of your question is correct, the issue with your script is in the following line:

 $(".option").removeClass("selected");

On radio button selection, each "option" tag on the page (regardless of column number) will have the "selected" class removed. Instead, you'll want to try something like the following to limit the removal to the selected row, only (By finding the closest parent div/row of the selected checkbox):

jQuery(".checkbox-radio").change(function() {
  $(this).closest("div").find(".option").removeClass("selected");
  if ($(this).is(':checked')){
    $(this).closest(".option").addClass("selected");
  }
  else
    $(this).closest(".option").removeClass("selected");
});

Example: http://codepen.io/JasonGraham/pen/zBvwOK

This will then mean that each row can have one option tag with a "selected" class at any given time.