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表示单击的元素。这意味着您要发送按下的提交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按钮引起的click事件中，因此它保存对按钮的引用。很明显，您的按钮不具有价值，因此您无法获得任何结果。

如果你想获得radiobutton的价值，试试这个：

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

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

3 个答案:

说明：