使用javascript获取选中的单选按钮的值[重复]

Posted 2023-03-05

【中文标题】使用javascript获取选中的单选按钮的值[重复]

【英文标题】：Getting the value of a checked radio button using javascript [duplicate]

【发布时间】：2017-12-20 15:04:58

【问题描述】：

我正在尝试仅使用 javascript 访问表单中选中的单选按钮的值，而不使用 jQuery。我查看了这个并看到了很多答案，但是当我将相同的代码复制到我的项目中时，由于某种原因它不起作用。这是我的代码。

<form>
     <input type="radio" name="style" value="3" checked>
     <input type="radio" name="style" value="5">
     <input type="radio" name="style" value="10">
</form>

我尝试使用此 JavaScript 代码访问该值：

var value = document.querySelector('input[name="style"]:checked').value;
console.log(value);

我假设这会给我字符串 3 作为记录值。当我尝试这个示例时，我收到以下错误：

request.js:1 Uncaught TypeError: Cannot read property 'value' of null
    at request.js:1

我还尝试使用名为 style 的输入数组的 for 循环，但这也不起作用。它找到了所有三个输入，但在数组中没有它们的值。有人可以解释什么是错的吗？如果这很明显，请耐心等待，我仍在学习，我只是在努力变得更好。

【问题讨论】：

在单个文件中对我来说效果很好（复制 html 并将 JS 插入到 <script> 标签下的同一文件中）

您的代码对我有用。您是否从没有选中任何单选按钮开始？仅当 document.querySelector('input[name="style"]:checked') 为空时才会发生错误，仅当 A）单选按钮不在 DOM 中或 B）未选中任何单选按钮时才会发生。

我发现了问题。我在一个外部文件中有我的 JavaScript。我将它从我的文档的头部移动到所有 HTML 下，以便在页面呈现后加载它。我认为这是修复它的原因吗？并感谢大家的回复。以前有人因为问问题而杀了我，但我没有导师，而且我是新手，所以这就像该死的感谢你杀死我的灵魂试图找到答案。

【参考方案1】：

您的代码是正确的，您只需要一个事件来运行选择器代码以获取所选值的值。请参见下面的代码：- 您还可以将 javascript 选择器用于单击事件，而不是在 onclick 事件处理程序中放置函数。

 
function run_test()
     
     var radio_ele = document.querySelector('input[name="style"]:checked');
     console.log(radio_ele.value);

<form>
  <input type="radio" name="style" value="3">
  <input type="radio" name="style" value="5">
  <input type="radio" name="style" value="10">
  <button type="button" onclick="run_test()">click</button>
</form>

【参考方案2】：

function getValue() 
  var value = document.querySelector('input[name="style"]:checked').value;
  console.log(value);

<form>
     <input type="radio" name="style" value="3" checked>
     <input type="radio" name="style" value="5">
     <input type="radio" name="style" value="10">
     <button type="button" onclick="getValue()">click</button>
</form>

您的代码工作正常，除了加载后您需要事件来获取最新值