jquery définit l'événement sélectionné pour le bouton radio

Dans le développement Web, le bouton radio est une zone de saisie utilisateur courante, qui permet à l'utilisateur de sélectionner l'une des multiples options. Dans certains cas, nous devons gérer le bouton radio sélectionné par l'utilisateur en conséquence, par exemple afficher un contenu différent en fonction du bouton radio sélectionné. Donc à ce stade, nous devons utiliser jQuery pour nous aider à implémenter l'événement de sélection du bouton radio. Cet article va vous montrer comment utiliser jQuery pour définir un événement de vérification pour un bouton radio.

1. Travail de préparation

Avant d'utiliser jQuery pour définir l'événement sélectionné pour le bouton radio, vous devez introduire la bibliothèque jQuery dans la page Web d'abord, qui peut être obtenu depuis jQuery Téléchargez la dernière version de la bibliothèque jQuery sur le site officiel, puis introduisez-la dans le fichier HTML :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. La structure HTML du bouton radio

Dans les paramètres Lors de la sélection de l'événement de la boîte à boutons radio, vous devez d'abord comprendre la structure HTML de la boîte à boutons radio. La boîte de boutons radio se compose d'une étiquette d'entrée et de l'étiquette d'étiquette correspondante. L'attribut type dans l'étiquette d'entrée est défini sur radio, indiquant qu'il s'agit d'une boîte de boutons radio. En même temps, l'étiquette d'entrée doit définir l'attribut de nom. afin que le même groupe de cases de boutons radio puisse être combiné.

Une structure simple de boutons radio est la suivante :

<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>

Dans le code ci-dessus, nous avons créé deux boîtes de boutons radio, qui appartiennent toutes deux au même groupe en raison de leurs noms Les attributs sont tous définis sur le sexe. Fait intéressant, la valeur de l'attribut for de l'étiquette label doit être cohérente avec la valeur de l'attribut id de l'entrée, de sorte que lorsque l'utilisateur clique sur l'étiquette label, le bouton radio correspondant sera automatiquement sélectionné.

3. Lier l'événement sélectionné

Lorsque l'utilisateur sélectionne le bouton radio, nous devons le gérer en conséquence. Afin d'implémenter cette fonction, nous devons utiliser la méthode .change() de jQuery, qui déclenchera la fonction de gestion d'événement correspondante lorsque l'état sélectionné du bouton radio change.

Un code simple pour lier un événement sélectionné à un bouton radio est le suivant :

$('input[type="radio"]').change(function() {
  // 在这里编写选中事件的相关代码
});

Dans le code ci-dessus, nous utilisons un sélecteur jQuery pour sélectionner tous les boutons simples La radio Le bouton est ensuite lié à une fonction de gestion d'événements via la méthode .change(), qui est déclenchée lorsque l'état sélectionné du bouton radio change.

4. Opérations associées

Après avoir lié l'événement sélectionné, vous pouvez gérer l'état sélectionné du bouton radio en conséquence. Voici quelques opérations courantes :

1. Obtenir le statut sélectionné

Vous pouvez utiliser la méthode .prop() pour obtenir le statut sélectionné de le bouton radio La méthode retournera vrai ou faux indiquant si le bouton radio est sélectionné.

$('input[type="radio"]').change(function() {
  if ($(this).prop('checked')) {
    console.log($(this).val() + '被选中了');
  } else {
    console.log($(this).val() + '没有选中');
  }
});

Dans le code ci-dessus, nous utilisons la méthode .prop() pour obtenir l'état sélectionné du bouton radio, puis générons les informations d'invite correspondantes en fonction de l'état sélectionné.

2. Masquer/Afficher les éléments

Parfois, nous devons afficher ou masquer certains éléments en fonction des cases radio sélectionnées par l'utilisateur. Vous pouvez utiliser la méthode .hide() et la méthode .show() pour masquer ou afficher des éléments.

$('input[type="radio"]').change(function() {
  if ($(this).val() === 'male') {
    $('#male-info').show();
    $('#female-info').hide();
  } else {
    $('#male-info').hide();
    $('#female-info').show();
  }
});

Dans le code ci-dessus, différents éléments sont affichés ou masqués selon le bouton radio sélectionné par l'utilisateur. La méthode .show() et la méthode .hide() sont ici utilisées pour afficher ou masquer. les éléments.

5. Summary

Cet article explique comment utiliser jQuery pour définir l'événement sélectionné pour la boîte de boutons radio en liant la fonction de gestionnaire d'événements, la sélection radio peut être réalisée Effectuer les opérations correspondantes lorsque l'état sélectionné de la boîte change, comme obtenir l'état sélectionné du bouton radio, masquer ou afficher l'élément. Les excellentes fonctionnalités de jQuery permettent aux développeurs de mettre en œuvre facilement et rapidement diverses exigences fonctionnelles. J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!