通过表单 ID 访问单选按钮值

Posted 2023-02-22

【中文标题】通过表单 ID 访问单选按钮值

【英文标题】：access radio button value through form id

【发布时间】：2013-07-12 22:25:53

【问题描述】：

我正在开发一个有多种形式的单选按钮的网站，其中一种是这样的：

<form id = "configuration">
    <ul>
        <li><input type="radio" name="configuration" id="0" value="0"/> GT Manual</li>
        <li><input type="radio" name="configuration" id="1" value="1"/> GT Automatic</li>
    </ul>
</form>

有没有一种方法（javascript）我可以直接访问单选按钮的值，例如

var value = document.getElementById("configuration").configuration.value;

（这里第一个“配置”是表单ID，而第二个“配置”是名称，而不是遍历表单中的每个元素来检查选择了哪个按钮？

谢谢！

【问题讨论】：

您应该使用jquery通过父名称访问子元素。

好的，谢谢。不过我一直在寻找一种 javascript 方法。

改用 getElementsByName() ！

【参考方案1】：

如果您使用的是 jQuery，您可以通过$('#configuration input:checkbox').val(); 知道选择了哪一个

【讨论】：

这个问题被标记为javascript，上面写着除非还包含框架/库的标记，否则需要一个纯 JavaScript 答案。即使不是这种情况，您的代码也会获得 first checkbox 而不是 checked radio button

的值

【参考方案2】：

这样弄……

var radios = document.getElementsByName('configuration');
 for (i = 0; i < radios.length; i++) 
    if (radios[i].type == 'radio' && radios[i].checked) 
        alert(radios[i].value);
    

【讨论】：

现有代码已经获取了无线电组，您的新行替换了它，但由于它们是<input> 而不是<configuration>s，所以不起作用。您还应该避免使用全局变量。

谢谢！如果您删除“标签”，这是完全有效的。我只是想知道，因为单选按钮选择在所有共享名称的元素中是唯一的，所以可能有一个函数可以直接检查按钮。但似乎不太可能没有...... :(

【参考方案3】：

由于单选按钮是组的一部分，因此它们具有相同的名称并由不同的 ID 标识。 KyleK 提供的答案是完全有效的。 但是，这是另一种方法 http://jsfiddle.net/9W76C/

if (document.getElementById('0').checked) 
   alert("GT Manual");

我还建议你使用 jquery...

【参考方案4】：

没有。您必须遍历无线电组以找出选择了哪一个。 .configuration 是标准 NodeList，而不是具有处理无线电组的额外功能的“子类”。

【讨论】：

嗯，我只是想知道，既然不能在同名按钮中选择两个按钮，为什么没有直接访问选择按钮的功能？我的意思是，这样的函数的实现可能仍然循环通过节点列表，但是有没有一个 html/javascript 内置函数可以做到这一点？