Obtenir la valeur du bouton radio sélectionné avec JavaScript/jQuery
Cet article explique comment obtenir la valeur du bouton radio sélectionné dans JavaScript et jQuery.
Pour obtenir le bouton radio sélectionné, vous pouvez utiliser le :checked Sélecteur de pseudo-classe CSS, représentant n'importe quelle radio (<input type="radio">) qui est cochée. Nous pouvons l'utiliser de plusieurs façons avec jQuery et JavaScript simple.
1. Utiliser jQuery
1. Le .val() peut être utilisée pour obtenir la valeur des éléments radio correspondants. Lorsqu'aucune option n'est sélectionnée, il renvoie une valeur indéfinie.
Le code suivant utilise .is() à l'intérieur d'un gestionnaire d'événements et renvoie true si un bouton radio est sélectionné.
JS
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('button').click(function() { var value = $("input[type=radio][name=contact]:checked").val(); if (value) { alert(value); } else { alert('Nothing is selected'); } }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
2. jQuery .filter() La méthode prend une expression de sélecteur et la compare à l'ensemble actuel d'éléments.
JS
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('button').click(function() { var radio = $("input[type=radio][name=contact]").filter(":checked")[0]; if (radio) { alert(radio.value); } else { alert('Nothing is selected'); } }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
2. Utiliser JavaScript
Avec JavaScript, vous pouvez parcourir chaque <radio> bouton à l'aide for…of boucle:
JS
|
1 2 3 4 5 6 7 8 9 |
document.getElementById('submit').onclick = function() { var radios = document.getElementsByName('contact'); for (var radio of radios) { if (radio.checked) { alert(radio.value); } } } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
Cela peut être raccourci au code suivant :
JS
|
1 2 3 4 5 |
document.getElementById('submit').onclick = function() { var radios = document.getElementsByName("contact"); var selected = Array.from(radios).find(radio => radio.checked); alert(selected.value); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
Alternativement, vous pouvez utiliser le querySelector() méthode pour accéder à l'élément correspondant.
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { var selected = document.querySelector('input[type=radio][name=contact]:checked'); alert(selected.value); } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> <button id="submit">Submit</button> </div> </body> </html> |
Il s'agit d'obtenir la valeur du bouton radio sélectionné dans JavaScript et jQuery.
Vérifier si un bouton radio spécifique est coché avec JavaScript/jQuery
Déterminer si un bouton radio est sélectionné avec JavaScript/jQuery
Lier le gestionnaire d'événements de modification au bouton radio avec JavaScript/jQuery