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');
});

更少的代码往往更好。你无法取消选择收音机。因此，点击无线电确保至少有一个点击。

Answer 2

请尝试使用click事件。您看到第二次点击后发生了更改，因为在第一个单选按钮失去焦点后change被触发。

Answer 3

两个单选按钮都更改后，$('.' + selectedMarkerClass).length == 2和$('.group_1').length == 4，因为您正在使用.group_1类用于单选按钮以及输入[type = text]。

需要过滤您的单选按钮，使用"[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');
    }
});

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

3 个答案: