javascript - 在 jQuery Radio 选项状态更改中使用 every() 的问题

Question

我有一个 radio 选项，例如

 <input type="radio" name="options" value="yes" />Yes<br />
 <input type="radio" name="options" value="no" />No<br />

我有一个像下面这样的jquery来获取选项的状态。现在我的问题是，当 var val = $('input:radio[name=options]:checked').attr('value'); 返回所选 radio 的获取值时，我可以吗真的需要像我在第二个片段中那样使用 each() 吗？

    var val = '';
    $.each($('input:radio[name=options]:checked'), function() {
        val += $(this).attr('value');
    });

这是代码

$('input:radio[name=options]').on('change', function() {
    var val = $('input:radio[name=options]:checked').attr('value');
    switch (val) {
        case 'yes':
            disturbance = false;
            console.log(disturbance);
            break;
        case 'no':
            disturbance = true;
            console.log(disturbance);
            break;
        }
});

和

$('input:radio[name=options]').on('change', function() {
    var val = '';
    $.each($('input:radio[name=options]:checked'), function() {
        val += $(this).attr('value');
    });
    switch (val) {
        case 'yes':
            disturbance = false;
            console.log(disturbance);
            break;
        case 'no':
            disturbance = true;
            console.log(disturbance);
            break;
        }
});

Answer 1

我相信答案是否定的，因为您的选择器 $('input:radio[name="options"]')已经指定了name属性和 radio 按 name 分组。 ，同时选择的同一组中只会有 1 个 radio ，因此您不需要迭代它们。

来自 MDN.event.change关于何时触发更改事件的描述来自 radio :

When the element is activated (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">;

该事件只会从您选择的事件中触发。

此外，您可以使用 .val()从输入中获取值。

除非您使用checkbox ，那么您必须迭代选定的复选框才能获取值。因为当你使用.val()时，您只会获得第一个输入的值。参见 jQuery#.attr() 的描述, jQuery#.val() ，两个函数都有类似的描述:

Get the (value of an attribute | current value) of the first element in the set of matched elements or ....

但是复选框可以在同一个名称组中选择多个，因此您需要遍历所有 checked复选框以获取其所有值。

$('input:radio[name="options"]').on('change', function() {
    var val = $('input:radio[name=options]:checked').val();
    switch (val) {
        case 'yes':
            disturbance = false;
            console.log(disturbance);
            break;
        case 'no':
            disturbance = true;
            console.log(disturbance);
            break;
        }
});

$('input:checkbox[name="fruit"]').on('change', function() {
    // It'll only get val from first checked checkbox, ignore others
    var val = $('input:checkbox[name=fruit]:checked').val();
    console.log(val);
    var result = [];
    $.each($('input:checkbox[name=fruit]:checked'), function(idx, item) {
        result.push($(item).val());
    });
    console.log(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="radio" name="options" value="yes" />Yes<br />
 <input type="radio" name="options" value="no" />No<br />

<input type="checkbox" name="fruit" value="apple" />Apple<br/>
<input type="checkbox" name="fruit" value="Banana" />Banana<br/>
<input type="checkbox" name="fruit" value="Orange" />Orange<br/>