HTML 单选按钮允许多项选择

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

它们都需要具有 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>

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

试试这个阵法，蛮花哨的...

看看这个jsfiddle

按钮收音机

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

Answer 4

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

Answer 5

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

Answer 6

为了使单选按钮正常工作，您必须按他的名字进行分组。 （例如名称=“类型”）

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

基本上，你必须给所有的名称属性相同，这样就只能选择其中一个...

这是更正后的代码：-

<fieldset>
        <legend>Please select one of the following</legend>
        <input type="radio" name="name" id="track" value="track" /><label for="track">Track Submission</label><br />
        <input type="radio" name="name" id="event" value="event"  /><label for="event">Events and Artist booking</label><br />
        <input type="radio" name="name" id="message" value="message" /><label for="message">Message us</label><br />
  </fieldset>