CODEWITHSUNDEEP
javascriptjqueryhtml
JGeer
JGeer

Reputation: 1852

jQuery add class to radio button is checked with specific label

I currently use jQuery to add/remove a class when a radio button is selected. The problem is that by default on page load a radio button is already checked. But in that case the class is not added, only when selecting another radio button.

How can I make this work, so that by default the class is already add to the radio button that is checked?

jQuery:

<script>
jQuery(".checkbox-radio").change(function() {
  $(this).closest("div").find(".radio-inline").removeClass("selected");
  if ($(this).is(':checked')){
    $(this).closest(".radio-inline").addClass("selected");
  }
  else
    $(this).closest(".radio-inline").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>

Upvotes: 0

Views: 1741

Answers (3)

Tushar
Tushar

Reputation: 87203

You can use .trigger('change') to trigger change event on elements and the event handler will be executed.

The class of the previously checked elements have to be removed before adding new class.

jQuery('.checkbox-radio').change(function () {
    // Remove all classes first
    $('.radio-inline.selected').removeClass('selected');

    // Add class to the closest element of the selected radio
    $('.checkbox-radio:checked').closest('.radio-inline')
        .addClass('selected');
}).trigger('change');


jQuery(".checkbox-radio").change(function() {
  $('.selected').removeClass('selected');
  $(".checkbox-radio:checked").closest(".radio-inline")
    .addClass("selected");
}).trigger('change');
span.option {
  display: block;
}
.selected {
  color: green;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 2

Satpal
Satpal

Reputation: 133403

You should trigger(eventType) the change event on page load.

Execute all handlers and behaviors attached to the matched elements for the given event type.

jQuery(".checkbox-radio").change(function() {
    //Existing code
}).trigger('change'); //Fire the event on page load

.change() can also be use as its shorthand for .trigger( "change" )

jQuery(".checkbox-radio").change(function() {
  $(this).closest("div").find(".radio-inline").removeClass("selected");
  if ($(this).is(':checked')) {
    $(this).closest(".radio-inline").addClass("selected");
  } else
    $(this).closest(".radio-inline").removeClass("selected");
}).trigger('change'); //Fire the change event
.selected {
  color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 0

guradio
guradio

Reputation: 15555

jQuery(".checkbox-radio").change(function() {
  $(this).closest("div").find(".radio-inline").removeClass("selected");
  if ($(this).is(':checked')) {
    $(this).closest(".radio-inline").addClass("selected");
  } else
    $(this).closest(".radio-inline").removeClass("selected");
}).change();//manually call change event here
.selected{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

  1. Manually call the change event using .change() or .trigger('change').

Upvotes: 0

Related Questions