Contrôle programmatique de la sélection des boutons radio

Les boutons radio sont essentiels pour créer des formulaires interactifs, offrant aux utilisateurs un moyen de sélectionner une seule option parmi un groupe. Ce guide montre comment contrôler par programmation la sélection des boutons radio à l’aide de JavaScript et de jQuery, améliorant ainsi les fonctionnalités de vos applications web.

Table des matières

• Cocher les boutons radio avec JavaScript
• Cocher les boutons radio avec jQuery
• Répondre aux clics sur les boutons

Cocher les boutons radio avec JavaScript

JavaScript offre un moyen direct de gérer la sélection des boutons radio. Le concept principal consiste à accéder à l’élément bouton radio et à modifier sa propriété checked.

// Obtenir l'élément bouton radio par son ID
const radioButton = document.getElementById('myRadioButton');

// Vérifier si l'élément existe avant d'essayer d'y accéder.
if (radioButton) {
  radioButton.checked = true;
} else {
  console.error("Bouton radio avec l'ID 'myRadioButton' non trouvé.");
}

Cet extrait récupère le bouton radio en utilisant son ID et définit la propriété checked sur true. L’instruction if garantit qu’un message d’erreur est affiché si l’élément n’est pas trouvé, évitant ainsi des erreurs inattendues. N’oubliez pas de remplacer 'myRadioButton' par l’ID réel de votre bouton radio. Il est crucial de noter que les boutons radio d’un même groupe partagent un attribut name commun. Sélectionner l’un désélectionne automatiquement les autres du groupe.

<input type="radio" id="myRadioButton" name="radioGroup" value="option1"> Option 1

Cocher les boutons radio avec jQuery

jQuery simplifie la manipulation du DOM. Sa syntaxe concise rend la sélection et la gestion des éléments beaucoup plus faciles.

// Cocher le bouton radio en utilisant son ID
$('#myRadioButton').prop('checked', true);

Ce code jQuery utilise la fonction $() pour sélectionner le bouton radio par ID et la méthode .prop() pour définir la propriété checked. Bien que .attr('checked', 'checked') soit également possible, .prop() est généralement préféré pour les attributs booléens car il reflète avec précision l’état de l’élément.

Répondre aux clics sur les boutons

Fréquemment, vous souhaiterez cocher un bouton radio en réponse à un clic sur un bouton. Les exemples suivants montrent comment faire cela à l’aide de JavaScript et de jQuery.

JavaScript

const button = document.getElementById('myButton');
const radioButton = document.getElementById('myRadioButton');

button.addEventListener('click', function() {
  if (radioButton) {
    radioButton.checked = true;
  } else {
    console.error("Bouton radio avec l'ID 'myRadioButton' non trouvé.");
  }
});

<button id="myButton">Cocher le bouton radio</button>
<input type="radio" id="myRadioButton" name="radioGroup" value="option1"> Option 1

jQuery

$('#myButton').click(function() {
  $('#myRadioButton').prop('checked', true);
});

Les deux exemples attachent un écouteur d’événement de clic à un bouton (ID : myButton). Cliquer sur le bouton définit la propriété checked du bouton radio associé sur true. N’oubliez pas d’adapter les ID à votre HTML.

Ce guide fournit une approche complète du contrôle de la sélection des boutons radio à l’aide de JavaScript et de jQuery, améliorant ainsi l’interactivité de vos formulaires web. N’oubliez pas de toujours mettre en œuvre une gestion robuste des erreurs pour assurer la stabilité de votre application.