允许多选的 HTML 单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20982993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML radio buttons allowing multiple selections
提问by SamesJeabrook
In my HTML form I have the below as a set of radio buttons, depending on what radio button you select depends on what the next form <fieldset>is revealed, this all works. The problem is for some reason they are working like a check box and not as a radio button. So you can select all options and not just the one at a time.
在我的 HTML 表单中，我有以下一组单选按钮，取决于您选择的单选按钮取决于下一个表单<fieldset>显示的内容，这一切都有效。问题是出于某种原因，它们像复选框一样工作，而不是单选按钮。因此，您可以选择所有选项，而不仅仅是一次选择一个。
Can anyone see where this is going wrong in the code below?
谁能在下面的代码中看到哪里出错了？
<fieldset>
<legend>Please select one of the following</legend>
<input type="radio" name="track" id="track" value="track" /><label for="track">Track Submission</label><br />
<input type="radio" name="event" id="event" value="event" /><label for="event">Events and Artist booking</label><br />
<input type="radio" name="message" id="message" value="message" /><label for="message">Message us</label><br />
</fieldset>
回答by lukasgeiter
They all need to have the samenameattribute.
它们都需要具有相同的name属性。
The radio buttons are grouped by the nameattribute. Here's an example:
单选按钮按name属性分组。下面是一个例子：
<fieldset>
<legend>Please select one of the following</legend>
<input type="radio" name="action" id="track" value="track" /><label for="track">Track Submission</label><br />
<input type="radio" name="action" id="event" value="event" /><label for="event">Events and Artist booking</label><br />
<input type="radio" name="action" id="message" value="message" /><label for="message">Message us</label><br />
</fieldset>
回答by Todd Williams
I've done it this way in the past, JsFiddle:
我过去这样做过，JsFiddle：
CSS:
CSS：
.radio-option {
cursor: pointer;
height: 23px;
width: 23px;
background: url(../images/checkbox2.png) no-repeat 0px 0px;
}
.radio-option.click {
background: url(../images/checkbox1.png) no-repeat 0px 0px;
}
HTML:
HTML：
<li><div class="radio-option"></div></li>
<li><div class="radio-option"></div></li>
<li><div class="radio-option"></div></li>
<li><div class="radio-option"></div></li>
<li><div class="radio-option"></div></li>
jQuery:
jQuery：
<script>
$(document).ready(function() {
$('.radio-option').click(function () {
$(this).not(this).removeClass('click');
$(this).toggleClass("click");
});
});
</script>
回答by MarijnS95
The name of the inputs must be the same to belong to the same group. Then the others will be automatically deselected when one is clicked.
输入的名称必须相同才能属于同一组。然后，当单击一个时，其他将自动取消选择。
回答by Omaralajlan
Try this way of formation, it is rather fancy ...
试试这种阵法，比较花哨……
Have a look at this jsfiddle
看看这个 jsfiddle
The idea is to choose a the radio as a button instead of the normal circle image.
回答by user3040525
All radio buttons must have the same name attribute added.
所有单选按钮必须添加相同的名称属性。
回答by JMPG Developer
To the radio buttons works correctly, you must to have grouped by his name. (Ex. name="type")
要使单选按钮正常工作，您必须按他的名字进行分组。（例如名称=“类型”）
<fieldset>
<legend>Please select one of the following</legend>
<input type="radio" name="type" id="track" value="track" /><label for="track">Track Submission</label><br />
<input type="radio" name="type" id="event" value="event" /><label for="event">Events and Artist booking</label><br />
<input type="radio" name="type" id="message" value="message" /><label for="message">Message us</label><br />
It will returns the value of the radio button checked (Ex. track | event | message)
它将返回选中的单选按钮的值（例如跟踪 | 事件 | 消息）
