How to add class based on input attribute in jquery?

Question

I have some radio buttons that are not initially setting css where checked = "checked".

Any suggestions what type of jquery statement I could use to apply a class on to checked input radio buttons?

I have also attached my jsfiddle

$(function() {
  $('label.radio-inline input').on('change', function() {
    var name = $(this).attr('name');
    if (true === $(this).prop('checked')) {
      $('[name=' + $(this).attr('name') + ']').parent().removeClass('radio-select');
      $(this).parent().addClass('radio-select');
    }
  });
});


<label class="radio-inline radio-style">
  <input type="radio" checked="checked" name="test1" value="1" class="radio-style">
</label>
<label class="radio-inline radio-style">
  <input type="radio" name="test1" value="2">
</label>
<br>
<label class="radio-inline radio-style">
  <input type="radio" checked="checked" name="test" value="1" class="radio-style">
</label>
<label class="radio-inline radio-style">
  <input type="radio" name="test" value="2">
</label>

Chain .change() or .trigger("change") to .on() jsfiddle.net/2Lbbf1b4/3 — guest271314
– guest271314, Commented Jan 20, 2017 at 22:42

Ohgodwhy · Accepted Answer · 2017-01-20 22:43:24Z

1

You could simplify this a bit and and use jQuery's .is() helper method to check for the checked state of the input and compare it against it's siblings with a same name:

$(function() {
    $('label.radio-inline input').on('change', function() {
        if ($(this).is(':checked')) {
            $('input[name="' + $(this).prop('name') +'"]').not($(this)).parent().removeClass('radio-select');
            $(this).parent().addClass('radio-select');
        }
    });
});

Updated jsFiddle

answered Jan 20, 2017 at 22:43

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

Comments

poushy · Accepted Answer · 2017-01-20 23:08:56Z

0

You need to set the class on initialization using:

$('label.radio-inline input[type=radio]:checked').parent().addClass('radio-select');

Check the fiddle: https://jsfiddle.net/2Lbbf1b4/4/

answered Jan 20, 2017 at 23:08

poushy

1,13411 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to add class based on input attribute in jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related