Maison > interface Web > Questions et réponses frontales > Comment définir la sélection radio en fonction de la valeur dans jquery

Comment définir la sélection radio en fonction de la valeur dans jquery

PHPz
Libérer: 2023-04-17 10:46:50
original
6439 Les gens l'ont consulté

Avec le développement continu de la technologie Internet, le front-end est sans aucun doute l'un des domaines les plus en vogue. Dans le développement front-end, jquery est une bibliothèque JavaScript très populaire et largement utilisée dans le développement et la maintenance de divers sites Web et applications. Dans cet article, je vais vous présenter comment utiliser jquery pour définir la sélection radio en fonction de la valeur.

1. Introduction à la radiocommande

La radiocommande est également appelée bouton radio. Il s'agit d'un contrôle sous forme HTML et est conçu pour permettre aux utilisateurs de sélectionner une seule option parmi plusieurs options. Les commandes radio sont généralement mises en œuvre à l'aide d'un ensemble de boutons radio identiques, organisés en groupe dont un seul peut être sélectionné.

En HTML, les contrôles radio sont généralement définis à l'aide de balises d'entrée, où l'attribut type est radio, l'attribut name est le nom d'un ensemble de boutons radio et l'attribut value est la valeur de chaque bouton radio, comme indiqué ci-dessous :

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
Copier après la connexion

2. Comment utiliser jquery pour définir la sélection radio en fonction de la valeur

Parfois, nous devons utiliser jquery pour définir dynamiquement l'état sélectionné de la commande radio. Ci-dessous, je présenterai deux méthodes pour obtenir l'effet de réglage de la sélection radio en fonction de la valeur.

1. Utiliser la méthode attr

La méthode attr est utilisée pour obtenir ou définir la valeur de l'attribut spécifié. Lorsque vous sélectionnez et décochez la radiocommande, vous pouvez utiliser cette méthode pour définir la valeur de son attribut coché.

Par exemple, nous avons un groupe de contrôle radio avec l'identifiant du sexe. Nous pouvons utiliser le code suivant pour définir l'état sélectionné du bouton radio correspondant :

// 根据值设置radio选中
$("input[name='gender'][value='male']").attr("checked", true);

// 取消选中
$("input[name='gender'][value='female']").attr("checked", false);
Copier après la connexion

Comme indiqué ci-dessus, nous sélectionnons d'abord les célibataires masculins et féminins dans le formulaire via le sélecteur Sélectionnez le bouton, puis utilisez la méthode attr pour définir la valeur de son attribut vérifié afin d'implémenter les opérations de vérification et de décochage.

2. Utilisez la méthode prop

La méthode prop est essentiellement similaire à la méthode attr, qui est utilisée pour obtenir ou définir la valeur d'attribut de l'élément. La différence est que la méthode prop est utilisée pour exploiter les attributs booléens, tels que vérifié, sélectionné, désactivé, etc., tandis que la méthode attr est utilisée pour exploiter les attributs non booléens.

Il est également très simple de définir l'état coché et non coché de la radiocommande via la méthode prop. Vous devez également utiliser le sélecteur correspondant pour sélectionner la radiocommande, puis utiliser la méthode prop pour définir la valeur de sa cochée. attribut.

Par exemple, le code suivant peut définir l'état sélectionné et non coché de la radiocommande en fonction de sa valeur :

// 根据值设置radio选中
$("input[name='gender'][value='male']").prop("checked", true);

// 取消选中
$("input[name='gender'][value='female']").prop("checked", false);
Copier après la connexion

3. Résumé

Dans cet article, j'ai présenté deux méthodes de définition de la sélection radio en fonction de la valeur dans jquery, à savoir utiliser la méthode attr et la méthode prop. Les deux méthodes sont très simples, il suffit de sélectionner la radiocommande via le sélecteur, puis d'utiliser la méthode attr ou prop pour définir la valeur de son attribut vérifié. J'espère que cet article pourra être utile à tout le monde rencontrant des problèmes similaires dans le développement front-end.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal