jQuery addClass when a radio button in a group is selected

Question

I have the following code:

var selectedMarkerClass = 'was-selected';

$('.group_1').change(function() {
    $(this).addClass(selectedMarkerClass);

    if ($('.' + selectedMarkerClass).length == $('.group_1').length) {
        $('#2').removeClass('red');
    }
});

Here is the HTML in question:

<input class="single_text_input group_1" type="text" name="primary_referral" />
<input class="single_text_input group_1" type="text" name="secondary_referral" />
<input class="group_1" type="radio" name="referral_open" value="Yes" /> Yes
<input class="group_1" type="radio" name="referral_open" value="No" /> No
<span id="2" class="red">Referral Group</span>

What is happening now is that both radio buttons in the group have to be changed in order for the class to be removed from the span. I would like it to work where only one of the radio buttons in the group has to be changed.

Answer 1

Use the click event not change event.

$('.group_1').click(function() {
    $(this).addClass(selectedMarkerClass);

    if ($('.' + selectedMarkerClass).length == $('.group_1').length) {
        $('#2').removeClass('red');
    }
});

Update:

if ($('.' + selectedMarkerClass).length == $('.group_1').length)

Is tripping you up. You are removing the red class only if the selected class has been added to each radio and you can only add the selected class if you click each radio.

A better way would be:

$('.group_1').click(function() {
    $('#2').removeClass('red');
});

Less code is often times better. You can't unselect a radio. So any click on the radios ensures at least one is clicked.