允许多选的 HTML 单选按钮答案

【问题标题】：HTML radio buttons allowing multiple selections允许多选的 HTML 单选按钮
【发布时间】：2014-01-25 19:21:12
【问题描述】：

在我的 HTML 表单中，我将以下内容作为一组单选按钮，具体取决于您选择的单选按钮取决于下一个表单 <fieldset> 显示的内容，这一切都有效。问题是由于某种原因，它们像复选框而不是单选按钮一样工作。因此，您可以选择所有选项，而不仅仅是一次选择一个。

任何人都可以在下面的代码中看到哪里出错了吗？

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

【问题讨论】：

标签： html forms

【解决方案1】：

他们都需要有 same name 属性。

单选按钮按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>

【讨论】：

【解决方案2】：

我过去就是这样做的，JsFiddle：

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：

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

<script>
    $(document).ready(function() {
        $('.radio-option').click(function () {
            $(this).not(this).removeClass('click');
            $(this).toggleClass("click");
        });
    });
</script>

【讨论】：

我非常喜欢这种方法，这意味着您可以获得更多选项来自定义复选框的外观，然后您是否有一个隐藏的输入字段来在表单中记录结果，或者您是否会纯粹收集该信息通过JS？
谢谢，我想你可以做到这一点，@ThePagan。我确实注意到我有两个不同的图像......不知道为什么我还没有更正它。应该是一个背景位置发生变化的精灵，否则移动设备上可能会出现图像加载伪影。

【解决方案3】：

试试这种编队方式，比较花哨……

看看这个jsfiddle

Button-Radio

The idea is to choose a the radio as a button instead of the normal circle image.

【讨论】：

【解决方案4】：

输入的名称必须相同才能属于同一组。然后其他的会在点击时自动取消选择。

【讨论】：

【解决方案5】：

所有单选按钮必须添加相同的名称属性。

【讨论】：

【解决方案6】：

要使单选按钮正常工作，您必须按他的名字分组。（例如 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 />

它将返回选中的单选按钮的值（例如轨道|事件|消息）

【讨论】：