允许多种选择的 HTML 单选按钮

在我的 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>
227706 次浏览
小开
最佳答案

它们都需要具有 一样 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>
小开

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

小开

要使单选按钮正常工作，您必须按照他的名字分组

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

它将返回选中的单选按钮(Ex. track | event | message)的值

小开

试试这种编队方式，挺花哨的..。

看看这把小提琴

按钮-收音机

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

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

小开

我以前就是这么做的:

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>

提交答案