web-dev-qa-db-fra.com

Comment cocher plusieurs boutons radio, des boutons radio ayant le même nom?

Je souhaite vérifier plusieurs boutons radio, tous ayant le même nom mais des identifiants différents.

Voici mon code html,

 <span style="float:left;margin:0 0 0 10px">Proactivity</span>
        <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Proactivity > Poor" name="q11[]">Poor</label>
        <label for="q11"  style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Proactivity > Good" name="q11[]">Good</label>

        <br/><br/>
        <span style="float:left;margin:0 0 0 10px">Service/support</span>
        <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Service/support > Poor" name="q11[]">Poor</label>
        <label for="q11"  style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Service/support > Good" name="q11[]">Good</label>

        <br/><br/>
        <span style="float:left;margin:0 0 0 10px">Provision of <br />specialist skills</span>
        <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Provision of specialist skills > Poor" name="q11[]">Poor</label>
        <label for="q11"  style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Provision of specialist skills > Good" name="q11[]">Good</label>
htmlradio-button
10
Symfony

Tu ne peux pas. Les boutons radio sont là pour un choix unique . Pour les choix multiples, vous avez besoin de cases à cocher.

15
Florian Margaine

En plaçant vos boutons radio dans la balise de formulaire, des groupes de boutons radio du même nom pourront fonctionner indépendamment les uns des autres.

http://jsfiddle.net/8qB56/

Mais, en regardant ce que vous essayez de faire, il est plus approprié que vous changiez le nom d’entrée de chaque question logique, car vous travaillez avec ce qui ressemble à un seul formulaire.

Vous pouvez donc peut-être remplacer name="q11[]" par name="q11[proactivity]" pour les entrées de question de proactivité, name="q11[service]" pour les entrées de question de service et name="q11[provision]" pour les entrées de question de provision.

Cela permettra à toutes les réponses sélectionnées de ces entrées de rester dans le champ q11 du côté serveur, vous pourrez alors manipuler les données comme vous le souhaitez (je suppose que q11 correspond à "question 11" ou quelque chose de ce genre, c'est pourquoi insister pour garder le même nom pour toutes ces entrées).

9
Andrew Ho

Lorsque vous utilisez le même nom pour toutes les entrées radio, ils appartiennent tous à un groupe. Cela ne vous permettra pas de faire des actions séparées. 

Vous devez utiliser des noms différents pour chaque groupe de radio

3
Dipak

L'utilisation de boutons radio pour sélectionner plusieurs éléments semble aller à l'encontre de la règle de convivialité. Si vous le faites, vous pouvez leur donner un nom différent.

PS: vous devriez fournir une feuille de style externe pour chaque bouton radio. Ce sera génial si vous voulez faire un ajustement plus tard.

2
Tepken Vannkorn

Cela fonctionne pls suivez le lien 

http://jsfiddle.net/Cwalkdawg/3CxLD/2/

Puisque vous insistez pour utiliser des radios, je choisirais une bibliothèque jQuery pour connaître vos valeurs. Vous pouvez ajouter une classe à vos radios, ce qui vous permettra de sélectionner cette classe et de la parcourir. C'est contre-intuitif et sale, mais cela fonctionnera. Ce balisage:

<input type="radio" class="rad" name="None" value="--" />None
<br />
<input type="radio" class="rad" name="Item1" value="Item1" />Item1
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Item2
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Item3
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Item4
<br />

Va avec ce jQuery:

$(document).ready(function () {
    $("#button").click(function () {
        // Radios
        $(".rad:checked").each(function() {
            console.log("Radio: " + $(this).val());
        });
    });
})

Dans le violon, j’ai aussi ajouté des cases à cocher, juste pour vous montrer à quel point il est plus facile c’est-à-dire le balisage suivant (qui se lit plus facilement et qui n’est pas aussi ambigu):

<input name="choices" type="checkbox" value="something1" />Option 1
<br />
<input name="choices" type="checkbox" value="something2" />Option 2
<br />
<input name="choices" type="checkbox" value="something3" />Option 3
<br />
<input name="choices" type="checkbox" value="something4" />Option 4
<br />

Va avec ce jQuery:

$("#button").click(function () {
    //Check boxes
    $("input:checkbox[name=choices]:checked").each(function() {
        console.log("Checkbox: " + $(this).val());
    });
});

Vous ne pouvez pas désélectionner un bouton radio à moins de vouloir tout désélectionner à l'aide d'un élément de réinitialisation, qui réinitialisera l'intégralité de votre formulaire, ou de la création d'une fonction personnalisée destinée uniquement aux radios (qui effacerait de toute façon tous les choix).

La désélection pourrait être acheminée vers votre bouton d'option Nom = Aucun avec le code suivant:

$(".rad[name=None]").click(function() {
    $(".rad").removeAttr("checked");
});
1
Sam

Vous pouvez aussi mettre un nombre (un compteur si vous utilisez js) dans votre tableau de noms comme ceci:

Proactivité: <input type="radio" name="myradio[0]"><input type="radio" name="myradio[0]">

Service/support: <input type="radio" name="myradio[1]"><input type="radio" name="myradio[1]">

Provision de 
compétences spécialisées: <input type="radio" name="myradio[2]"><input type="radio" name="myradio[2]">

0
Paolo Torasso