Question

我正在尝试使用jQuery来响应点击我的单选按钮组。由于某种原因，它没有按预期工作。每次我点击其中一个单选按钮时，返回的值都是相同的，默认值（即：美国邮递）。

这是我的jquery：

var deliveryMethod = $('input[name="delivery-method"]');
deliveryMethod.click(function() {
    if(deliveryMethod.val() === "U.S. postal delivery") {
        console.log('yay!');
    }
});

这是我的标记：

<div class="form-radios"><div class="form-item" id="edit-delivery-method-U.S.-postal-delivery-wrapper">
 <label class="option" for="edit-delivery-method-U.S.-postal-delivery"><input type="radio" id="edit-delivery-method-U.S.-postal-delivery" name="delivery-method" value="U.S. postal delivery"  checked="checked"  class="form-radio" /> U.S. postal delivery</label>
</div>
<div class="form-item" id="edit-delivery-method-Canadian-postal-delivery-wrapper">
<label class="option" for="edit-delivery-method-Canadian-postal-delivery"><input type="radio" id="edit-delivery-method-Canadian-postal-delivery" name="delivery-method" value="Canadian postal delivery"   class="form-radio" /> Canadian postal delivery</label>
</div>
<div class="form-item" id="edit-delivery-method-International-postal-delivery-wrapper">
<label class="option" for="edit-delivery-method-International-postal-delivery"><input type="radio" id="edit-delivery-method-International-postal-delivery" name="delivery-method" value="International postal delivery"   class="form-radio" /> International postal delivery</label>
</div>
<div class="form-item" id="edit-delivery-method-Digital-delivery-wrapper">
<label class="option" for="edit-delivery-method-Digital-delivery"><input type="radio" id="edit-delivery-method-Digital-delivery" name="delivery-method" value="Digital delivery"   class="form-radio" /> Digital delivery</label>

Answer 1

因为它返回一个元素数组，并且您只检查第一个项的值。在jquery中处理数组时，需要取值$(this)的值，该数组中的元素触发了click函数：

var deliveryMethod = $('input[name="delivery-method"]');
deliveryMethod.click(function() {
    if($(this).val() === "U.S. postal delivery") {
        console.log('yay!');
    }
});

Answer 2

当使用.val()的getter版本时，如果您调用它的jQuery对象包含多个DOM元素引用，.val()将仅返回集合中第一个的值。您只需获取checked输入元素的值。

监听复选框的更改事件可能更合适，因为如果已经选中了单击的复选事件，它仍会调用您的功能。

然后，您可以将.filter()与:checked伪选择器一起使用，仅返回已检查的广播input并获取其值：

var deliveryMethod = $('input[name="delivery-method"]');
deliveryMethod.change(function() {
    if(deliveryMethod.filter(':checked').val() === "U.S. postal delivery") {
        console.log('yay!');
    }
});

JSFiddle

Answer 3

这是因为你有几个名为delivery-method的元素，所以当你做第一个赋值时，你会得到一个元素数组，但是click函数只会触发第一个元素。写得像这样：

$('input[name="delivery-method"]').each(function() {

   $(this).click(function() {
    //do what you did here
   });
});

jquery radio group选择器没有改变值

3 个答案: