Question

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

每当我使用单选按钮时，它只允许你点击一个，所以我对这个要求感到困惑。我甚至去了W3学校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

Answer 1

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

＆＃13;

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

＆＃13;

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

Answer 2

这是因为当输入类型为radio：

时，您需要提供相同的名称属性

<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>

Answer 3

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

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

<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

话虽这么说，但我不知道为什么要让你使用单选按钮进行多项选择。他们绝对不是那个

Answer 4

单选按钮需要共享相同的名称属性才能表现得那样。换句话说，只能一次检查一个同名的单选按钮。

正如MDN所述

收音机：一个单选按钮。您必须使用value属性来定义此项目提交的值。使用checked属性指示是否默认选中此项。 具有相同name属性值的单选按钮位于相同的＆＃34;单选按钮组＆＃34 ;;一次只能选择一个组中的一个单选按钮。

以下是您的代码调整后的行为。

<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>

因此，您想要使用什么方法。

Answer 5

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

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

单选按钮选择多个选项

5 个答案: