Question

我试图仅使用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循环，但也没有用。它找到了所有三个输入但在数组中没有它们的值。有人可以解释一下有什么问题吗？如果这很明显，请耐心等待我仍然在学习我只是想要变得更好。

Answer 1

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>

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用javascript获取已检查单选按钮的值

2 个答案: