如何从 JavaScript 访问单选输入值？ [复制]答案

【问题标题】：How can you access the radio input value from JavaScript? [duplicate]如何从 JavaScript 访问单选输入值？ [复制]
【发布时间】：2017-10-09 15:15:03
【问题描述】：

如何从下面的 HTML 代码示例中使用 JavaScript 获取值？

<input type="radio" name="question1" value=1> Choose me <br/>
<input type="radio" name="question1" value=2> Or me! <br/>

我可以用这个吗？我该如何改变它，如果我有 3 组无线电输入，JavaScript 可以添加用户输入的值？

function myFunction() {
var x = document.getElementsByTagName("input")[0].getAttribute("value"); 
document.getElementById("demo").innerHTML = x;

【问题讨论】：

标签： javascript html

【解决方案1】：

function getValues() {

var x = document.getElementById("myInput").value; 
document.getElementById("feedback_1").innerHTML = x;

var y = document.querySelector('input[name="group"]:checked').value;

document.getElementById("feedback_2").innerHTML = y;

};

<h3>Input</h3>
<input type="radio" value="First value" name="single" id="myInput" checked>1</input>
<hr>
<input type="radio" value="1" name="group">1</input>
<input type="radio" value="2" name="group">2</input>
<input type="radio" value="3" name="group" checked>3</input>

<p><button onclick="getValues();">Get values</button></p>

<h3>Your selection</h3>
<p id="feedback_1"></p>
<p id="feedback_2"></p>

【讨论】：

【解决方案2】：

const radios = document.querySelectorAll('input[name=question1]');

radios.forEach((radio)=>{
  radio.addEventListener('change',(e)=>{
    document.getElementById("demo").innerHTML = e.target.value;
  });
});

<input type="radio" name="question1" value=1> Choose me <br/>
<input type="radio" name="question1" value=2> Or me! <br/>
<p id="demo"></p>

【讨论】：