选择多个选项的单选按钮答案

【问题标题】：Radio buttons selecting multiple options选择多个选项的单选按钮
【发布时间】：2016-05-28 07:00:32
【问题描述】：

好的，我正在为我的计算机课程做一个项目，我们正在使用表单中的单选按钮。部分要求是确保单击提交按钮时不会留空，并且只单击一个单选按钮。

每当我使用单选按钮时，它只允许您单击一个，所以我对这个要求感到困惑。我什至去了 W3 Schools HTML Forms Input Types 并确认一次只能选择一个单选框。

在联系了我的 TA 之后，尽管他向我发送了以下代码，该代码允许选择多个单选按钮。关于为什么以下代码允许选择多个单选按钮以及我对单选按钮的了解是否正确的任何说明都会很棒。提前致谢。

<html>
    <head>
    
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    
    <body>
    <div>

    <form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}">
    <input type="radio"> one<br>
    <input type="radio"> two<br>
    <input type="radio"> three<br>

    </form>
    </div>
    </body>
    </html>

JSFiddle

【问题讨论】：

既然您正在学习 HTML，请尽量避免使用 w3schools。
我并不陌生，这就是我们在课堂上所做的工作，我认为我们需要检查是否有多个被检查是愚蠢的，因为我以前从未遇到过这种情况。
@user3272438 最终认为radio button selects only one in a group 这里的名称属性告诉我们单选按钮属于哪个组，但在您的代码中没有名称属性，因此每个单选都被视为一个单独的组并获取都选了
@JohnAnkanna 所以基本上只要给他们相同的名字就不需要用javascript检查它了吗？
@user3272438 好的，非常感谢

标签： html forms radio-button

【解决方案1】：

这是因为当输入类型为单选时，您需要提供相同的名称属性：

<form method="post" action="">
<input type="radio" name="radio">one
<br>
<input type="radio" name="radio">Two
<br>
<input type="radio" name="radio">Three
<br>
</form>

【讨论】：

【解决方案2】：

你必须把它们放在一个组中。你可以这样做

<form action="">
  <input type="radio" name="gender" checked> Male<br>
  <input type="radio" name="gender" > Female<br>
  <input type="radio" name="gender" > Other
</form>

如果您使用相同的名称，则将其视为一个组。 name="gender" 像这样。

【讨论】：

【解决方案3】：

单选按钮需要共享相同的 name 属性才能表现得像这样。换句话说，一次只能选中一个同名的单选按钮。

正如MDN所说的

radio：单选按钮。您必须使用 value 属性来定义此项目提交的值。使用checked 属性表示是否默认选中此项。 name属性值相同的单选按钮在同一个“单选按钮组”中；一次只能选择一个组中的一个单选按钮。

这是您的代码调整后的行为。

<html>
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <body>
    <div>
    <form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}">
    <input type="radio" name="field"> one<br>
    <input type="radio" name="field"> two<br>
    <input type="radio" name="field"> three<br>
    </form>
    </div>
    </body>
</html>

所以这取决于你想使用什么方法。

【讨论】：

【解决方案4】：

单选按钮必须是组的一部分才能选择最多一个。该组用name 属性表示。组中的所有单选按钮应具有相同的name。

这是你更新的小提琴：https://jsfiddle.net/8fn0hfoh/1/

【讨论】：

【解决方案5】：

输入没有设置名称属性，因此它们没有分组

正如您在此处看到的，单选按钮在命名时只允许选择一项：

<div>
<form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}">
<input name="group_name" type="radio"> one<br>
<input name="group_name" type="radio"> two<br>
<input name="group_name" type="radio"> three<br>
</form>
</div>

jsfiddle

话虽如此，我不知道您为什么被告知要使用单选按钮进行多项选择。它们绝对不是为此而设计的

【讨论】：

我们使用单选按钮进行单选，但我们需要检查在提交表单时是否只选择了一个单选按钮，这在我看来很愚蠢。
@user3272438 你得问问他们为什么选择这样做，我也觉得很傻
所以基本上给他们相同的名字将消除使用javascript检查它的需要
是的，我不知道有任何现代浏览器不遵守该规则