Comment savoir quel bouton radio est sélectionné via jQuery : guide complet

Pourquoi c'est important et comment ne pas se perdre avec les boutons radio

Imaginez : vous créez un formulaire de contact, un sondage ou des paramètres de profil. Partout où l'utilisateur doit choisir une option parmi plusieurs, les boutons radio viennent à la rescousse. Mais dès qu'il s'agit de traiter la sélection côté client, de nombreux débutants (et même des développeurs expérimentés) trébuchent. La question "How can I know which radio button is selected via jQuery?" est l'une des plus populaires sur Stack Overflow, et pour cause : tout semble simple, mais il y a suffisamment de nuances.

Dans ce guide, nous allons explorer plusieurs méthodes pour obtenir la valeur du bouton radio sélectionné avec jQuery. Vous apprendrez à éviter les erreurs courantes, à rendre votre code propre et à adapter les solutions à différents scénarios. C'est parti !

Structure HTML de base pour les boutons radio

Avant d'écrire du jQuery, créons un formulaire simple avec des boutons radio. Supposons que nous demandions à l'utilisateur son langage de programmation préféré :

<form id="surveyForm">\n  <p>Votre langage de programmation préféré :</p>\n  <label>\n    <input type="radio" name="language" value="python"> Python\n  </label>\n  <label>\n    <input type="radio" name="language" value="javascript"> JavaScript\n  </label>\n  <label>\n    <input type="radio" name="language" value="java"> Java\n  </label>\n  <br><br>\n  <button type="button" id="getResult">Voir le choix</button>\n</form>

Remarque : tous les boutons radio ont le même attribut name="language". C'est ce qui les regroupe en une seule série — un seul choix est possible. Si vous utilisez des noms différents, il s'agira de groupes indépendants.

Méthode n°1 : le sélecteur jQuery :checked — le classique

La méthode la plus directe et la plus courante consiste à utiliser le sélecteur :checked. Il trouve tous les éléments de formulaire cochés (sélectionnés). Combiné avec .val(), nous obtenons instantanément la valeur :

$('#getResult').on('click', function() {\n  var selectedValue = $('input[name="language"]:checked').val();\n  if (selectedValue) {\n    alert('Vous avez choisi : ' + selectedValue);\n  } else {\n    alert('Rien n\'est sélectionné !');\n  }\n});

Que se passe-t-il ici ?

\n
• $('input[name="language"]:checked') — on recherche parmi tous les input avec le nom "language" uniquement ceux qui sont cochés.
\n
• .val() — on récupère l'attribut value de l'élément trouvé.
\n
• La vérification if (selectedValue) — si rien n'est sélectionné, .val() renvoie undefined, et nous affichons un avertissement.
\n

Cette méthode est idéale lorsque vous avez un seul groupe de boutons radio et que vous devez obtenir la valeur de l'un d'eux.

Méthode n°2 : Utilisation de .filter() et .is() pour plus de flexibilité

Parfois, vous ne voulez pas vous fier uniquement à :checked ou vous devez effectuer des actions supplémentaires sur l'élément sélectionné. Les méthodes .filter() et .is() sont alors utiles :

$('#getResult').on('click', function() {\n  var selected = $('input[name="language"]').filter(':checked');\n  if (selected.length > 0) {\n    console.log('Élément sélectionné :', selected);\n    var value = selected.val();\n    var id = selected.attr('id');\n    alert('Valeur : ' + value + ', ID : ' + (id || 'aucun'));\n  } else {\n    alert('Veuillez choisir un langage.');\n  }\n});

La méthode .filter(':checked') filtre uniquement les éléments cochés de la collection. Et .is(':checked') peut être utilisé pour vérifier un élément spécifique :

// Vérifie si Python est sélectionné\nif ($('input[value="python"]').is(':checked')) {\n  console.log('Python — un excellent choix !');\n}

Cette approche est pratique lorsque vous avez besoin non seulement d'obtenir la valeur, mais aussi de manipuler