HTML单选button允许多个select
在我的HTML表单中，我有下面的一组单选button，这取决于你select的单选button取决于下一个表单<fieldset>的显示，这一切工作。 问题是由于某些原因，他们像一个checkbox，而不是一个单选button。 所以你可以select所有的选项，而不是一次只select一个。
任何人都可以看到下面的代码中哪里出错？
<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>
他们都需要具有相同的 name属性。
单选button按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>
我以前就是这样做的， JsFiddle ：
CSS：
.radio-option { cursor: pointer; height: 23px; width: 23px; background: url(..http://img.dovov.comcheckbox2.png) no-repeat 0px 0px; } .radio-option.click { background: url(..http://img.dovov.comcheckbox1.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>
input的名称必须相同才能属于同一组。 然后，其他人将被自动取消select一个点击。
尝试这种形成的方式，这是相当花哨…
看看这个jsfiddle
扣收音机
The idea is to choose a the radio as a button instead of the normal circle image.
对单选button正常工作，你必须按他的名字进行分组。 （例如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 />
它将返回检查的单选button的值（例如track | event | message）
所有单选button必须添加相同的名称属性。
