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>

Ответ 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>

Ответ 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>

Ответ 3

Название входов должно быть одинаковым для одной и той же группы. Затем остальные будут автоматически отменены при нажатии.

Ответ 4

Попробуйте этот способ формирования, это довольно причудливо...

Посмотрите на этот jsfiddle

Кнопка-Радио

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

Ответ 5

Для правильных переключателей вы должны сгруппироваться по его имени. (Пример 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 />

Он вернет значение переключателя (Ex. track | event | message)

Ответ 6

Все радиокнопки должны иметь одинаковый атрибут имени.