Mar
21

Cocher un bouton radio avec JQuery

JQuery, cocher un bouton radio

Oui je sais, ca parait bête à faire mais en fait, j’ai quand même passé une bonne vingtaine de minutes à trouver comment faire.

Alors vous allez me dire: « C’est simple, il suffit de mettre l’attribut checked à true »

Bah non ce serait trop simple (même si au final, la solution reste simple^^)

Prenons cette exemple :

<div id="choixOuiNon"><label>Oui :</label> <input id="oui" type="radio" name="choix" value="1" /> <label>Non :</label> <input id="non" type="radio" name="choix" value="0" /></div>

Pour cocher Oui en javascript on pourrait penser faire :

$('#oui').checked = true;

En fait, 2 solutions s’offre à vous pour cocher votre bouton radio « Oui »
Pour la première il faut pouvoir sélectionner votre bouton Oui (donc avec son identifiant) afin de lui attribuer l’attribut checked avec la valeur checked

//Soit on attribut la valeur checked à l'attribut checked
$('#oui').attr('checked','checked')

Soit on se base sur le nom du champ, et on lui attribut la valeur que l’on souhaite (soit 1 soit 0)
Attention, bien penser au crochet et au guillemet autour de la valeur

// On coche Non
$('#choixOuiNon input[name=choix]').val(['0']);
 
//On coche Oui
$('#choixOuiNon input[name=choix]').val(['1']);

Pour ma part, j’ai opté pour la 2eme solution car plus facile à automatiser, j’ai remplacé la valeur à cocher par une variable et une seule ligne de code suffit, peut importe le nombre de bouton radio ayant le même nom.



8 Comments to “Cocher un bouton radio avec JQuery”

  • bedomon 27 juin 2012 à 10 h 29 min

    Intéressant, mais c’est dommage que tu limites l’utilisation avec une div, beaucoup de sites sont encore en mode tableau pour la mise en page

  • Nico 27 juin 2012 à 10 h 43 min

    Le fait que ce soit une div ou un tableau ne change rien. Tu peux créer un tableau dont l’id est choixOuiNon, contenant des inputs dont les id sont respectivement oui et non et dont l’attribut name est choix. Cela fonctionnera de la même façon.

  • bedomon 27 juin 2012 à 16 h 47 min

    Justement je dis ca, car je suis confronté a une appli pour ie6, ou les input sont dans des td et tr differents et ce magnifique navigateur ne veut pas recuperer mes radios… alors que chez firefox aucun souci……

  • bedomon 27 juin 2012 à 16 h 49 min

    ps
    $(‘#oui).checked = true;
    il manque une cote après oui

  • Appo 27 juin 2012 à 19 h 24 min

    Merci c’est corrigé :)

  • Appo 27 juin 2012 à 19 h 29 min

    Par contre je ne comprends pas ton problème avec IE6, comme le dit Nico, peut importe que ce soit une div ou une table, jquery se base sur l’élement ayant l’id « choixOuiNon ».

    L’erreur doit venir d’autre part, vérifie bien ta structure html pour voir si les sélecteurs JQuery correspondent bien à ta structure.

  • Richnou 9 juillet 2013 à 7 h 17 min

    Merci pour le truc.
    Par contre, je profite pour rebondir: tel quel, ton label ne sert à rien.

    Oui :

    Il faut soit encadrer l’étiquette et l’input pour les associer ensemble
    Oui :

    soit utiliser for= » » et glisser l’id de l’input
    Oui :

  • Richnou 9 juillet 2013 à 7 h 19 min

    Nouvel essai, le html ne passe pas…

    Faux:
    [label>Oui :[/label> [input id= »oui » type= »radio » name= »choix » value= »1″ />

    Juste:
    [label>Oui : [input id= »oui » type= »radio » name= »choix » value= »1″ />[/label>

    Juste aussi:
    [label for= »oui »>Oui :[/label> [input id= »oui » type= »radio » name= »choix » value= »1″ />

Poster un commentaire

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes