选择多个选项的单选按钮

好吧，我正在为我的计算机课程开发一个项目，我们正在使用窗体中的单选按钮。部分要求是确保当提交按钮被点击时，它不会留空，并且只有一个单选按钮被点击。选择多个选项的单选按钮

每当我使用单选按钮，它只允许你点击一个，所以我被这个需求所困惑。我甚至去过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

来源

2016-02-16 nviens

既然你了解HTML，尽量避免W3Schools的。 – j08691

我对此并不陌生，这就是我们在课堂上所做的工作，我认为我们需要检查多次被检查是愚蠢的，因为我以前从未遇到过这种情况。 – nviens

@ user3272438终于想通，只有一个在这里group' name属性为'单选按钮选择是告诉我们的单选按钮属于哪个组，但在你的代码中没有名字的属性，使每个无线电被视为一个独立的组，并得到选择每一个 – Ankanna

的输入没有name属性设置，因此它们不进行分组

正如你可以在这里看到，单选按钮只允许一个选择当命名时：

<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

这就是说，我不知道为什么你被告知使用单选按钮进行多项选择。他们绝对不是为此而设计的

来源

2016-02-16 20:13:12

我们正在使用单选按钮单个选择，但我们需要检查的是，当表单提交这对我来说似乎是愚蠢的只有一个单选按钮被选中。 – nviens

@ user3272438你将不得不问他们为什么选择这样做，似乎傻对我来说太 –

所以基本上给他们相同的名称将删除需要使用JavaScript – nviens

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

如所述通过MDN

无线电：一个单选按钮。您必须使用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>

因此，它取决于你什么样的方法，你想使用。

来源

2016-02-16 20:13:19 ooredroxoo

单选按钮需要成为一个组的一部分，最多可以选择一个按钮。该组用name属性表示。组中的所有单选按钮应具有相同的name。

这是你更新的提琴：你必须把它们放在一个组https://jsfiddle.net/8fn0hfoh/1/

来源

2016-02-16 20:13:25 Matt

。你可以做，如果你使用它考虑为一组同名像这样

<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"这样。

来源

2016-02-16 20:14:21

这是因为你需要提供相同的名称属性时，输入类型为广播：

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

来源

2016-02-17 10:05:41 virat

选择多个选项的单选按钮

回答

相关问题