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

jQuery addClass when a radio button in a group is selected

本文关键字：jQuery addClass 单选按钮 选择      更新时间：2023-09-26

我有以下代码：

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中删除。我希望它能在组中只有一个单选按钮需要更改的情况下工作。

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

代码越少越好。您不能取消选择收音机。因此，任何对收音机的点击都会确保至少有一个被点击。

请改用click事件。您可以看到更改发生在第二次单击之后，因为change在第一个单选按钮失去焦点后被激发。

两个单选按钮都更改后，$('.' + 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');
    }
});
相关文章：