Question

在我的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>

Answer 1

他们都需要相同 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>

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

Answer 3

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

Answer 4

尝试这种形式，这是相当花哨的......

看看这个jsfiddle

Button-Radio

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

Answer 5

要使单选按钮正常工作，您必须按名称分组。（例如姓名=“类型”）

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

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

Answer 6

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

HTML单选按钮允许多个选择

6 个答案: