jQuery addClass 当组中的单选按钮被选中时

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.

Answer 2

Try it with click event instead. You see the change take place after the second click because change gets fired after the first radio button loses focus.

Answer 3

After both radio button changed, $('.' + selectedMarkerClass).length == 2 and $('.group_1').length == 4 because you are using .group_1 class for radio buttons and as well as for input[type=text] too.

need filter your radio button, use "[name=referral_open]" ,

var selectedMarkerClass = 'was-selected';

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

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