jquery select n'est pas coché

jQuery est l'un des outils les plus populaires de JS. Il fournit de nombreuses méthodes simples et faciles à utiliser pour nous faciliter le traitement des éléments DOM dans les pages Web. Lors du traitement des formulaires, nous devons souvent sélectionner les éléments radio et cases à cocher sélectionnés dans les éléments du formulaire. Cependant, nous rencontrons parfois une telle situation. Comment sélectionner des éléments qui n'ont pas d'attribut coché dans le formulaire ?

Tout d'abord, nous devons comprendre le statut des éléments du formulaire. Pour un bouton radio et une case à cocher, ils ont un état coché. Ce statut peut être vrai ou faux s'il est coché, il est vrai, sinon il est faux. Dans le DOM, nous pouvons y accéder via l'attribut vérifié.

Pour les boutons radio, un seul sera sélectionné. Le code HTML suivant est un élément de formulaire composé de deux boutons radio :

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

En accédant à l'attribut coché, on peut retrouver l'élément de bouton radio sélectionné :

var selectedRadio = $('input[name="gender"]:checked');

Pour les cases à cocher , ils peuvent avoir plusieurs sélections. Le code HTML suivant est un élément de formulaire composé de deux cases à cocher :

<input type="checkbox" name="interest" value="music" checked>音乐
<input type="checkbox" name="interest" value="sports">运动

On peut retrouver l'élément de case à cocher sélectionné en accédant à l'attribut coché :

var selectedCheckbox = $('input[name="interest"]:checked');

Cependant, s'il y a Il n'y a pas d'attribut coché dans l'élément de formulaire, que devons-nous faire ?

Méthode 1 : Utiliser la pseudo-classe :has() du sélecteur jQuery

On peut utiliser la pseudo-classe :has() du sélecteur jQuery, qui permet de sélectionner Élément parent d'éléments enfants spécifiques. Pour les boutons radio et les cases à cocher qui n'ont pas d'attribut coché, nous pouvons utiliser la pseudo-classe :not() pour les filtrer, puis utiliser la pseudo-classe :has() pour sélectionner leurs éléments parents.

Par exemple, nous avons le code HTML suivant :

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

Nous pouvons utiliser le code suivant pour sélectionner l'élément parent d'un bouton radio non coché :

var unselectedRadioParent = $('input[name="gender"]:not(:checked)').parent();

# 🎜🎜 #De même, pour les éléments de case à cocher, nous pouvons utiliser une méthode similaire :

var unselectedCheckboxParent = $('input[name="interest"]:not(:checked)').parent();

Il est à noter que le sélecteur de pseudo-classe :not() est plus gourmand en performances. Par conséquent, il est recommandé d’utiliser la deuxième méthode si votre formulaire contient un grand nombre d’éléments de boutons radio ou de cases à cocher.

Méthode 2 : Utilisez la méthode filter()

La méthode filter() est utilisée pour filtrer la collection d'éléments qui correspondent à un sélecteur ou une fonction donnée. Nous pouvons utiliser la méthode filter() pour filtrer tous les éléments de bouton radio ou de case à cocher sélectionnés, puis utiliser la méthode not() pour filtrer les autres éléments.

Par exemple, pour le groupe de boutons radio suivant, nous pouvons sélectionner les éléments de boutons radio non cochés à l'aide du code suivant :

var unselectedRadio = $('input[name="gender"]').not(':checked');

De même, pour le groupe de cases à cocher suivant, nous pouvons utilisez le code suivant pour sélectionner les éléments de case à cocher non cochés :

var unselectedCheckbox = $('input[name="interest"]').not(':checked');

summary

Dans les éléments de formulaire, nous devons souvent sélectionner les boutons radio et les cases à cocher sélectionnés. S'il n'y a pas d'attribut vérifié dans l'élément de formulaire, nous pouvons utiliser la pseudo-classe :has() ou la méthode filter() du sélecteur pour sélectionner les éléments de bouton radio et de case à cocher non cochés. Ces méthodes nous offrent des choix plus flexibles lors du traitement des formulaires, nous permettant de gérer facilement les formulaires dans diverses situations.

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!