JQuery 努力从单选按钮获取值(value)

Question

我有一个像这样的简单表格

 <form>
    <label class="radio-inline"><input type="radio" name="optradio" value="yes" checked="checked">Yes</label>
    <label class="radio-inline"><input type="radio" name="optradio" value="no">No</label><br><br>
    <button type="submit" class="btn artBtn" title="click here ">Submit &gt;</button>
</form>

此表单在多个页面中使用，但我认为这并不重要。 然后我执行以下操作

$(".artBtn").click(function(e) {
    e.preventDefault();
    if ($('input[name="optradio"]:checked').size() > 0) {
        $('.contentDiv').html('<p>Thanks!</p>');
        submitData($(this).val());
    }
});

为什么我发送给submitData的值是空的？我也尝试过直接通过输入检索它，但如果我这样做，它是未定义的。如何获得合适的选定值？

谢谢

Answer 1

在 click 处理程序中，this 指的是单击的元素。这意味着您正在发送按下的提交按钮的值。由于它没有任何值(value)，您将收到一封空白邮件。

改为发送所选单选按钮的值:

submitData($('input[name="optradio"]:checked').val());

所以完整版本可能是这样的:

$(".artBtn").click(function(e) {
    e.preventDefault();
    var $radio = $('input[name="optradio"]:checked');
    if ($radio.length){
        $('.contentDiv').html('<p>Thanks!</p>');
        submitData($radio.val());
    }
});

注释:

• 您可以使用 if ($radio.length) 测试非零长度，看看是否存在匹配。
• 仅运行选择器一次，以避免额外处理并将结果保存在变量中。
• 我提倡在 jQuery 对象前面加上 $ 的标准，以明确什么是 jQuery 对象。