Comment vérifier un bouton radio en utilisant JavaScript ou jQuery
- Vérifier le bouton radio en utilisant JavaScript
- Vérifier le bouton radio à l’aide de jQuery
- Vérifier le bouton radio en fonction d’un clic de bouton
Nous utilisons souvent des scripts côté client comme jQuery ou JavaScript, pour créer des sites web interactifs et rapides et pouvons effectuer des opérations simples comme la validation de formulaires de manière efficace sans avoir à se rendre sur le serveur web.
Si nous voulons qu’un bouton radio soit sélectionné par défaut ou lors d’un clic sur un bouton, nous pouvons utiliser JavaScript ou jQuery.
Commençons par définir un formulaire.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
Vérifier le bouton radio en utilisant JavaScript
Sélectionnez le bouton radio en utilisant ID
L’une des meilleures façons de présélectionner un bouton radio est de s’y référer par son identifiant. Pour sélectionner l’élément DOM à l’aide de l’ID, nous ajoutons le préfixe # à l’ID et définissons la valeur cochée comme étant vraie.
document.querySelector('#myradio_1').checked = true;
Production: Le bouton radio 1 est sélectionné.
Sélectionnez le bouton radio à l’aide de la valeur
Une autre option consiste à utiliser la valeur du bouton radio pour le présélectionner. La sélection par valeur peut être utile dans les cas où nous ne connaissons pas l’ID d’un bouton radio mais que nous en connaissons la valeur.
Nous pouvons utiliser l’ID du div parent et sélectionner l’élément dont la valeur est 2. Ensuite, nous pouvons définir l’attribut “coché” comme étant true.
document.querySelector('#radiobuttonset > [value="2"]').checked = true;
Production: Le bouton radio 2 est sélectionné.
Dans certains cas, lorsque nous savons qu’aucun autre élément du DOM n’est égal à la valeur prédéfinie, nous pouvons sélectionner l’élément en vérifiant simplement si la valeur. Dans ce cas, nous n’aurons pas besoin de l’ID parent.
document.querySelector('[value="3"]').checked = true;
Production: Le bouton radio 3 est sélectionné.
Vérifier le bouton radio à l’aide de jQuery
Outre l’utilisation de JavaScript, nous pouvons également utiliser la bibliothèque jQuery pour vérifier un bouton radio sur la base d’une valeur prédéfinie. jQuery est une bibliothèque, construite à l’aide de JavaScript. Elle permet de simplifier le parcours et la manipulation du DOM HTML. La syntaxe de jQuery est également plus simple que celle de JavaScript.
Pour ajouter l’utilisation de jQuery, il faut ajouter une référence à la bibliothèque jQuery, soit à partir du CDN, soit à partir d’un fichier local.
Sélectionnez le bouton radio en utilisant ID
Comme JavaScript, pour accéder à l’élément DOM en utilisant l’ID, nous utilisons le préfixe #. Cependant, la syntaxe exacte dépend de la version de jQuery utilisée.
La version stable actuelle de jQuery est la 3.4.1.
La version de jQuery est égale ou supérieure (>=) à 1.6
Si la version de jQuery utilisée est supérieure ou égale à 1.6, nous utilisons prop pour définir l’attribut vérifié comme étant vrai.
$('#myradio_1').prop('checked', true);
Production: Le bouton radio 1 est sélectionné.
La version de jQuery est antérieure à (<) 1.6
Si la version de jQuery est antérieure à la version 1.6, nous pouvons mettre à jour l’attr comme vérifié.
$('#myradio_2').attr('checked', 'checked');
Production: Le bouton radio 2 est sélectionné
Sélectionnez le bouton radio en utilisant la valeur
Nous pouvons également mettre à jour la valeur sélectionnée pour le bouton radio en fonction de la valeur du bouton.
$('input[name=radiobutton][value=\'1\']').prop('checked', true);
Production: Le bouton radio 2 est sélectionné
Vérifier le bouton radio en fonction d’un clic de bouton
Une fois que nous savons comment mettre à jour le bouton radio en utilisant JavaScript ou jQuery, nous pouvons mettre à jour la sélection en fonction d’un événement comme un clic sur un bouton ou une sélection d’un autre élément. Pour le tester, nous allons mettre à jour notre formulaire pour ajouter un bouton.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
<button id="button_1">check 1</button>
Nous pouvons alors ajouter un événement “clic” sur le bouton. Le clic sélectionne le premier bouton radio.
$('#button_1').click(function() {
$('input[name=radiobutton]').val(['1']);
});
Production: Le premier bouton radio est sélectionné