javascript - 当选择组中的单选按钮时 jQuery addClass

Question

我有以下代码:

var selectedMarkerClass = 'was-selected';

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

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

这里是有问题的 HTML:

<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>

现在发生的情况是，必须更改组中的两个单选按钮才能从 span 中删除该类。我希望它能够在只需要更改组中的一个单选按钮的情况下工作。

Answer 1

使用click事件而不是change事件。

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

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

更新:

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

让你绊倒了。仅当选定的类已添加到每个单选按钮时，您才会删除红色类别，并且只有单击每个单选按钮才能添加选定的类别。

更好的方法是:

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

代码越少通常效果越好。您无法取消选择 radio 。因此，对 radio 的任何点击都会确保至少有一个被点击。