CAM308 CAM308 - 5 months ago 33
jQuery Question

Trying to use javascript to add unique class when radio button checked

I'm trying to use javascript to change the background color of the radio label when it is checked. Each radio button will apply a different class or color. I need to use java because of a css conflict with a plugin. Also need the radio value field for dynamic purposes, so can't use that field to add class.

Here's where I'm at:



$(window).load(function() {
$('#emailGroup1').change(function() {
if (this.checked) {
$(this).parent().addClass('Good');
} else {
$(this).parent().removeClass('Good');
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="confirmGroup">
<form>
<label id="emailGroup">
<input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked>
Pending
</label>
<label id="emailGroup">
<input type="radio" name="emailConfirm" id="emailGroup2" value="Good">
Good
</label>
<label id="emailGroup">
<input type="radio" name="emailConfirm" id="emailGroup3" value="Bad">
Bad
</label>
</form>
</div>





I'd like to have the javascript read the default checked radio button and apply that class when page loads. Then when user selects different radio button, class is removed from default checked and applied to selection.

Answer Source

Your issue is due to your duplicate use of id attributes, which is invalid. you can instead use common class attributes to target your elements and then apply the good class as needed. Try this:

$('.email').change(function() {
  $('.emailGroup.good').removeClass('good');
  $(this).closest('.emailGroup').addClass('good');
});
.good { background-color: #0D0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="confirmGroup">
  <form>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked="true" class="email">
      Pending
    </label>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup2" value="Good" class="email">
      Good
    </label>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad" class="email">
      Bad
    </label>
  </form>
</div>

Also note that this can be achieved using CSS alone by a slight amendment of your HTML:

.email:checked + label { 
  background-color: #0C0;
}
<div id="confirmGroup">
  <form>
    <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked="true" class="email">
    <label class="emailGroup" for="emailGroup1">
      Pending
    </label>

    <input type="radio" name="emailConfirm" id="emailGroup2" value="Good" class="email">
    <label class="emailGroup" for="emailGroup2">
      Good
    </label>

    <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad" class="email">
    <label class="emailGroup" for="emailGroup3">
      Bad
    </label>
  </form>
</div>