如何创建具有不同名称的互斥单选按钮？答案

【问题标题】：How can I create mutually exclusive radio buttons with different names?如何创建具有不同名称的互斥单选按钮？
【发布时间】：2011-03-14 02:10:19
【问题描述】：

我有几个属于同一类别的单选按钮，但我想以不同的方式命名它们并使它们互斥。我怎么做？根据选择的值，我执行不同的操作，如果它们具有相同的名称，我将无法访问它们。

【问题讨论】：

如果您需要不同的名称，您必须在提交表单时更改电台名称。

标签： javascript html radio-button

【解决方案1】：

如果它们具有相同的名称，为什么不能访问它们？ 您可以添加 ID（您应该），您可以按值区分或仅计算它们并使用第 n 个元素。

您应该为单选按钮指定相同的名称，以使浏览器了解它们是独占的。

您可以（但不应该）解决这个问题，并给每个对象一个不同的名称。然后为每个对象添加一个 onSelect/onClick 处理程序，当事件触发时，“取消选中”其他按钮。这很脏，应该避免。

【讨论】：

因为我想根据所选值执行不同的操作。操作代码是用 Java 编写的。
那么为什么不看看你的 Java 代码中的参数值并用它来决定做什么呢？
是的，这就是我最后所做的。

【解决方案2】：

单选按钮需要相同的名称才能互斥。但是，如果您想使用 JavaScript 单独操作它们，它们可以具有不同的 ID 属性值。

使用 jQuery 获取选定值的方法有很多：

<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />


// value of checked input tag of type 'radio'
var selectedValue = $('input[type=radio]:checked').val();

// value of checked input tag having name of 'foo'
var selectedValue = $('input[name=foo]:checked').val();

// value of the first checked radio button, regardless of name
var selectedValue = $('input:checked').val();

【讨论】：

【解决方案3】：

如果您必须更改名称，您可以通过 JavaScript 访问 DOM 及其元素。

<input type="checkbox" name="X" id="myElement" />

<script>   document.getElementById('myElement').name = 'text'; </script>

http://www.w3schools.com/JS/js_ex_dom.asp

【讨论】：