bouton radio jquery sélectionné décoché

Les boutons radio sont souvent utilisés dans le développement Web, et jQuery fournit une méthode simple et facile à utiliser pour le fonctionnement interactif de cet élément.

Ce qui suit explique comment utiliser jQuery pour sélectionner et décocher les boutons radio.

1. Cochez le bouton radio

Pour sélectionner le bouton radio, nous devons utiliser la méthode attr() pour ajouter l'attribut vérifié à l'élément du bouton radio et définir sa valeur sur true.

Par exemple, en supposant que nous ayons un élément de bouton radio avec l'identifiant radio1, nous pouvons implémenter l'opération de sélection via le code suivant :

$('#radio1').attr('checked', true);

2. Décochez le bouton radio

Décocher l'état sélectionné du bouton radio est également très simple, il vous suffit de définir la valeur de l'attribut vérifié sur false.

En continuant à prendre l'exemple ci-dessus, nous pouvons décocher l'opération via le code suivant :

$('#radio1').attr('checked', false);

3. Événement Bind

Dans certains cas, nous devons écouter l'opération de l'utilisateur sur le bouton radio et répondre en conséquence en fonction du traitement des opérations. À l'heure actuelle, vous pouvez utiliser la fonction de liaison d'événements de jQuery.

En prenant la sélection et la désélection comme exemple, nous pouvons lier un événement de clic pour surveiller le fonctionnement de l'utilisateur. Lors de la liaison d'un événement, vous devez spécifier l'élément à écouter et l'action à effectuer.

Par exemple, en continuant à prendre le bouton radio avec l'identifiant de radio1 comme exemple, nous pouvons utiliser le code suivant pour implémenter l'événement de liaison :

$('#radio1').click(function() {
    if ($(this).is(':checked')) {
        // 选中
        // do something
    } else {
        // 取消选中
        // do something
    }
});

Dans le code ci-dessus, nous utilisons la méthode is() pour déterminer le état sélectionné du bouton radio. Si le statut sélectionné est vrai, effectuez l'opération de sélection, sinon effectuez l'opération de désélection.

4. Opération par lots

Dans certains cas, nous devons faire fonctionner plusieurs cases de boutons radio en même temps, comme par exemple tout cocher ou tout annuler. À l'heure actuelle, vous pouvez utiliser le sélecteur de jQuery et la méthode each() pour effectuer des opérations par lots sur plusieurs boîtes de boutons radio.

Par exemple, supposons que nous ayons 3 éléments de boutons radio et que leurs noms de classe sont radio. Nous pouvons utiliser le code suivant pour sélectionner toutes les opérations :

$('.radio').each(function() {
    $(this).attr('checked', true);
});

Dans le code ci-dessus, nous utilisons un sélecteur de classe pour sélectionner tous les éléments de bouton radio, et utilisons la méthode each() pour les parcourir, puis utilisons la méthode attr() pour les sélectionner L'état sélectionné est défini sur true.

De même, nous pouvons également utiliser le code suivant pour désélectionner toutes les opérations :

$('.radio').each(function() {
    $(this).attr('checked', false);
});

5. Résumé

Grâce à l'introduction ci-dessus, nous pouvons constater qu'il est très simple d'utiliser jQuery pour faire fonctionner les boutons radio. Les opérations de sélection et de décoche peuvent être facilement implémentées via la méthode attr(), les opérations utilisateur peuvent être surveillées via la liaison d'événements et les opérations par lots peuvent être implémentées via la méthode selector et each().

Dans le développement réel, nous devons utiliser raisonnablement ces méthodes en fonction des besoins pour obtenir une meilleure expérience utilisateur et une meilleure efficacité de développement.

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!