如何从“HTML 表单”接收值到 javascript 代码？ [复制]答案

【问题标题】：How to receive values from 'HTML form' to a javascript code? [duplicate]如何从“HTML 表单”接收值到 javascript 代码？ [复制]
【发布时间】：2013-07-08 17:23:04
【问题描述】：

表单包括 Radio、Select、Input 等。

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

输入元素可以正常工作，但单选按钮元素不能正常工作！

在我的 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。

【问题讨论】：

ID 必须是唯一的！

标签： javascript dom

【解决方案1】：

通过使用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;

 }
 }

【讨论】：

【解决方案2】：

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 的两个值只会得到第一个。

【讨论】：

他可以使用 JQuery 并获取所有 id = "radioValue" 的输入元素，不需要是唯一的，例如 $('div[id^="radioValue"]')
@drakoumelitos，首先：ID 必须是唯一的；第二：他没有标记jQuery。
@drakoumelitos 这是一个糟糕的建议。首先，ID 必须是唯一的（请阅读 W3C 规范），其次，jQuery 不需要做这么琐碎的事情。
为什么ID必须是唯一的？最好使用一个类来“分组”它们，但如果你知道你在用你的元素做什么，我仍然看不到任何问题
@drakoumelitos：因为 HTML 标准是这样说的，所以调用 getElementById 不会让您感到惊讶。单选按钮元素已按 name 分组。

【解决方案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

【讨论】：