JQuery努力从单选按钮中获取价值

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

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

谢谢

Answer 1

在click处理程序中，this 指单击的元素。这意味着您正在发送提交button按下的值。由于它没有价值，因此您会收到一个空白发送。

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

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对象。

Answer 2

为了详细说明@TrueBlueAussie所说的内容，在您的click事件范围内，$(this)将引用按钮本身。要解决此问题，您可以将单选按钮分配给变量，稍后再引用它，如下所示

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

Answer 3

您使用this，就好像它是选中的单选按钮一样。这在事件中工作，作为对导致事件触发的元素的引用。在这里，它存在于由单击 artBtn 按钮引起的点击事件中，因此它保留了对按钮的引用。显然，您的按钮没有价值，因此这就是您没有得到任何结果的原因。

如果要获取单选按钮的值，请尝试以下操作：

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