两个单选按钮共享一个“id”？答案

【问题标题】：Two radio buttons share one "id"?两个单选按钮共享一个“id”？
【发布时间】：2011-11-29 04:43:51
【问题描述】：

我正在借用/改编这个简单的 html/javascript 表单设置来将一些数据放入数据库中。原始代码使用表单中的文本字段，但我使用的是单选按钮。下面的前三个步骤是原始的，我的问题是在之后...即，我是否给单选按钮提供相同的 id...希望这很清楚...

步骤 1. 用户在表单中输入 id 为“nick”的值

<tr>  
    <td><label>User</label></td>  
    <td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>  
</tr>

步骤 2. 与 id "nick" 关联的值使用 id 分配给变量

var inputUser = $("#nick");

步骤 3. 从变量中获取值以插入数据库...

if(inputUser.attr("value")

但如果是两个“单选按钮”而不是一个“文本”字段......

<td><label>Interview</label></td>  
<td><input type="radio" name="interview" id="nick" value="pass" />Pass</td>
<td><input type="radio" name="interview" id="nick" value="fail" /> Fail</td>

我是否给单选按钮赋予相同的“id”，这样当我将值分配给变量时它仍然是这样...

var inputUser = $("#nick");

所以无论哪个被选中的按钮都会被分配到ID“nick”中？

【问题讨论】：

元素不能共享一个 id。它会导致意外行为，尤其是在使用 javascript 时。
单选按钮的名称可能与 id 不同，因此您可以尝试这样 var inputUser = $(":input[name=interview]:checked").val(); 用于选定的单选按钮值**
请参考 HTML 4.01 规范，其中规定不允许重复 ID，并且自 1999 年规范以来未更改。 w3.org/TR/REC-html40

标签： javascript html

【解决方案1】：

不，Id 属性应该始终是唯一的。如果您使用的是 jQuery（看起来像），您可以使用 $('input[name=interview]'); 选择它。

【讨论】：

谢谢，我是新手，请确认我分配值的整行将如下所示： var inputUser = $('input[name=interview]');
@Michael，对，那里的 jQuery 选择器将获取所有“name”设置为“interview”的输入。 inputUser 将存储这个 jQuery 对象。
我正在尝试这个，但它告诉我变量未定义stackoverflow.com/questions/8320980/…
我试图找到具有相同 ID“AMCRadio”的单选按钮。在了解此评论后，我更改了 id 和 voila，我得到了唯一标识的单选按钮。因此能够获取$("#AMCRadio1").is(":checked")

【解决方案2】：

由于您使用的是 jQuery，因此您可以使用 :checked 选择器轻松获取所选单选按钮的值：

$("input[name=interview]:checked").val()

您绝对不应该为多个元素提供相同的 ID（这是无效的 HTML，会导致您的 JavaScript 中出现令人困惑的错误），但即使这样有效，在这种情况下也无济于事，因为作为一组的单选按钮不会't have a selected value：您需要确定当前选中的是哪一个，然后如上所示获取其值。（在实际提交表单时获取网络服务器上的值时，这不是问题，因为只有来自选中单选的值被提交。）

另请注意，在您说inputUser.attr("value") 的原始代码中，您可以说inputUser.val()。

【讨论】：

【解决方案3】：

ID 属性在整个页面中是唯一的。每个单选按钮应该有不同的 ID。使用以下代码获取输入值。

var inputUser=$('input:radio[name=interview]:checked').val();

【讨论】：

我尝试了您的解决方案，但它告诉我变量未定义。 stackoverflow.com/questions/8320980/…

【解决方案4】：

如果想使用纯javascript，你必须使用..

document.querySelector('input[name=radio_btn_name]');

但它需要更新浏览器。旧浏览器可能会导致错误。

为了克服这个问题，可以使用 javascript 库（库会处理这个问题）。为此使用以下..

$('input[name=radio_btn_name]:checked').val();

【讨论】：

这真的很有帮助！

【解决方案5】：

不要重复 id。最好每页只使用一个 id，因为它必须是唯一的。您可以使用 name 属性对单选按钮进行分组。

使用$('input[name=interview]') 获取值。

【讨论】：

【解决方案6】：

您必须为input type=radio 分配相同的名称但不同的ID，因为这是raido 按钮的基本属性，您只需从gavel aal 单选按钮中选择一个值。

但该 id 不应分配给其他表单元素

【讨论】：

【解决方案7】：

分配给元素的id 在文档中必须是唯一的。所以，不，你不应该使用相同的id。

【讨论】：

【解决方案8】：

代替 id="nick"

你可以使用name="nick"

或者

class="nick"

【讨论】：

这样可以吗？ var inputUser = $(".nick");用 [.] 表示类？
@Michael Ya 可以使用 $(".nick") 和 $.each()... 你可以用这个获得所有值...。更好的方法是通过名称 $('input[name=nick]') 会给你选择的值....