Question

I have a form with radio buttons, as in

<label for="challenge" class="fat">Challenge 
    <input type="radio" name="create-what" value="challenge" id="challenge">
</label>
<label for="team" class="fat">Team 
    <input type="radio" name="create-what" value="team" id="team">
</label>

Obviously, clicking the label selects the radio. What I need to do also is change the class of the label based on the selected state of the radio button. So, add a class “active” to the selected radio’s label, and remove it if the radio is not selected.

I have many pairs like this, so I was looking for the most portable way. Thanks.

Answer 1

In jQuery is quite simple by monitoring the change event and toggling the class based on the checked state

$('input:radio').change(function(){

     $(this).parent().toggleClass('active', this.checked).siblings().removeClass('active');
});

toggleClass allows a boolean for second argument to determine whether to add or remove. this.checked will be either tru or false;

If you need this to run on page load as well just trigger the change when page loads:

$('input:radio').change(function(){

     $(this).parent().toggleClass('active', this.checked).siblings().removeClass('active');
}).change();