为什么我的无线电输入值是 NaN？答案

【问题标题】：Why is the value of my radio inputs NaN?为什么我的无线电输入值是 NaN？
【发布时间】：2016-03-10 23:21:49
【问题描述】：

所以我有一段代码

$(this).find('input[name^="radio-qid-"]:checked').val()

其中$(this) 包含一段 HTML like 在一段 HTML like 中获取选中的单选按钮

<div class="yesno-holder">
   <div class="radio">
      <label><input type="radio" class="yes-radio" name="radio-qid-2" value="100" checked="">Yes</label>
   </div>
   <div class="radio">
      <label><input type="radio" class="no-radio" name="radio-qid-2" value="50">No</label>
   </div>
</div>

奇怪的是，在那种情况下它总是计算为NaN，而如果我在浏览器中输入$('input[name^="radio-qid-"]:checked').val()，它会在这些HTML片段中获取所有选中的单选按钮，它会打印出一个真实的值（作为字符串）。那么这里发生了什么？？？？

【问题讨论】：

你对那个 jQuery 表达式的结果做什么？你怎么知道是NaN？您确实没有发布足够的代码；正如您所指出的，该表达式确实有效。
是的。其实很难找到“问题”。
那么你在哪里使用返回 NaN 的值？

标签： javascript jquery html css dom

【解决方案1】：

从表单返回的值将是一个字符串。您必须先将其转换为数字。

尝试从单选按钮获取值并将其放入parseInt，例如parseInt($('input[name^="radio-qid-"]:checked').val(),10)

【讨论】：

【解决方案2】：

我可以为您提供“this”选择器不起作用的更具体原因。

“this”选择器指的是父元素中的任何值。例如，尝试使用此代码，它将起作用。

$(document).ready(function(){
    $('.yesno-holder').click(function(){
        var value = ($(this).find('input[name^="radio-qid-"]:checked').val());
        alert(value);
    });
});

在这种情况下，这指的是被点击的“.yesno-holder”中的内容。您可以设置任意数量的“.yesno-holder”实例，它只会返回您单击的类中的结果。

【讨论】：

【解决方案3】：

嗯...我已经测试过，这里一切正常...

jQuery(document).ready(function($) {
  $('input[name^="radio-qid-"]:checked').on('change',function(){
    alert($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno-holder">
  <div class="radio">
    <label>
      <input type="radio" class="yes-radio" name="radio-qid-2" value="100" checked="">Yes</label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" class="no-radio" name="radio-qid-2" value="50">No</label>
  </div>
</div>

【讨论】：