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

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