Question

表格包括广播，选择，输入等。

var variable = document.getElementById('anyId').value;

使用input元素可以正常工作，但是使用单选按钮元素并不能正常工作！

在我的HTML页面（对于广播），代码看起来像这样，

<input type="radio" id="radioValue" name="radio" value="2">Radio_1
<input type="radio" id="radioValue" name="radio" value="1">Radio_2

并在脚本中

 var radio_value = document.getElementById('radioValue').value;

radio_value始终等于2，无论您选择radio_1还是radio_2都无关紧要。

Answer 1

ID必须是唯一的。因此，您应该将代码更改为：

<input type="radio" id="radioValue1" name="radio" value="2">Radio_1
<input type="radio" id="radioValue2" name="radio" value="1">Radio_2

然后你可以通过以下方式获得这些值：

var radio_value1 = document.getElementById('radioValue1').value;
var radio_value2 = document.getElementById('radioValue2').value;
//or 
var radio_value=document.querySelector('input[name="radio"]:checked').value; 
// in this last case you don't need even to have id's in the buttons

否则尝试读取具有相同ID的两个值将只为您提供第一个。

Answer 2

使用getElementsByName

var selectedradio;
var radios = document.getElementsByName("radio");

 for(var i = 0; i < radios.length; i++) {
 if(radios[i].checked == true) {
   alert(radios[i].value);
   selectedradio = radios[i].value;

 }
 }

Answer 3

适用于大多数现代浏览器的纯javascript。（也适用于ie 9）

如果您只有一个表单，并且只有一组广播使用querySelector

这是新的正确方式。

var radio_value=document.querySelector('input[type="radio"]:checked').value

如果您有多个广播组和表单，也可以轻松扩展它。

var radio_value=document.querySelector('#YOURFORM input[name="radio"]:checked').value

如何从“HTML表单”接收值到javascript代码？

3 个答案: