web-dev-qa-db-fra.com

Boutons radio HTML permettant des sélections multiples

Dans mon formulaire HTML, le bouton ci-dessous correspond à un ensemble de boutons radio. Selon le bouton que vous sélectionnez, le type de formulaire suivant <fieldset> est révélé, tout cela fonctionne. Le problème est que, pour une raison quelconque, ils fonctionnent comme une case à cocher et non comme un bouton radio. Ainsi, vous pouvez sélectionner toutes les options et pas seulement une à la fois.

Quelqu'un peut-il voir où cela ne va pas dans le code ci-dessous?

  <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>
htmlforms
51
SamesJeabrook

Ils doivent tous avoir l'attribut identiquename.

Les boutons radio sont regroupés par l'attribut name. Voici un exemple:

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

Je l'ai fait de cette façon dans le passé, 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>
6
Todd Williams

Le nom des entrées doit être identique pour appartenir au même groupe. Ensuite, les autres seront automatiquement désélectionnés lorsqu’on clique dessus.

3
MarijnS95

Essayez ce mode de formation, c'est plutôt chic ...

Regardez ce jsfiddle

Bouton-Radio 

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

Pour que les boutons radio fonctionnent correctement, vous devez avoir groupé par son nom. (Ex. Nom = "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 />

Il retournera la valeur du bouton radio coché (Ex. Track | event | message)

1
JMPG Developer

Tous les boutons radio doivent avoir le même attribut de nom ajouté.

1
user3040525