Javascript implémente les compétences de sélection des cases à cocher attribut_javascript

Quiconque est familier avec le développement web front-end sait que juger si une case à cocher est souvent effectuée. Il existe de nombreuses façons de juger, mais la compatibilité de ces méthodes est souvent ignorée pendant le processus de développement. et l'effet est obtenu. En tant que blogueur, j'utilisais de nombreuses méthodes. Je trouvais souvent sur Google des articles négatifs sur ceci ou cela, et j'ai été confus par la suite. Il m'est arrivé de voir un blog étranger aujourd'hui et j'ai trouvé qu'il l'expliquait très bien. J'ai l'intention de le traduire en chinois et d'y ajouter quelques-unes de mes propres opinions.

Si vous êtes engagé dans le développement Web et que les pages Web que vous développez comportent des cases à cocher, vous devrez peut-être déterminer si la case est actuellement cochée, puis exécuter certaines instructions conditionnelles. Il existe de nombreuses façons de déterminer si une case est cochée.

Voyons d'abord comment le javascript natif détermine cet attribut. En JavaScript, après avoir sélectionné un élément, vous pouvez facilement déterminer si la case que vous avez sélectionnée est cochée via l'attribut vérifié de l'élément.

Regardons un exemple. Il y a une case à cocher sur votre page et la case à cocher a un identifiant unique, tel que myCheckBox, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

Maintenant, nous sélectionnons d'abord cet élément via javascript, puis obtenons son attribut vérifié.

Copier le code Le code est le suivant :

Fonction checkCheckBox() {
Si (document.getElementById('myCheckBox').checked) {
                     //changez-le en alert('Its Checked') si vous ne travaillez pas avec la console
console.log('C'est vérifié');
         } autre {
console.log('Non, ce n'est pas coché');
>
>

Comme vous pouvez le voir, nous sélectionnons d'abord l'élément par identifiant, puis déterminons son attribut coché. Si la case est cochée, sa valeur est vraie. Si la case n'est pas cochée, sa valeur sera fausse.

Si vous utilisez jQuery et que vous ne souhaitez pas utiliser du javascript natif pour porter ce jugement, il existe plusieurs façons :

Utiliser est(':coché')

Dans cette utilisation, vous utiliserez la fonction is() de jQuery. La fonction de cette fonction est de déterminer si l'élément ou la collection d'éléments sélectionné répond aux paramètres de condition que vous transmettez à la fonction. Si les conditions sont remplies, elle renvoie vrai, sinon elle renvoie faux.

Donc, pour utiliser cette fonction, nous devons sélectionner l'élément puis vérifier la valeur du sélecteur : coché. Ce sélecteur fonctionne pour les cases à cocher, les boutons radio et les balises de sélection.

[/code]
$('input[type="button"]').click(function () {
Si ($('#myCheckBox').is(':checked')) {
                     //changez-le en alert('Its Checked') si vous ne travaillez pas avec la console
console.log('C'est vérifié');
         } autre {
console.log('Non, ce n'est pas coché');
>
});
[/code]

Utiliser prop()

Avant jQuery 1.6, la fonction attr() était utilisée pour obtenir les propriétés et attributs des éléments, mais c'était très déroutant. Ainsi, après jQuery 1.6, une nouvelle fonction prop() est utilisée pour obtenir la valeur de propriété actuelle de l'élément.

Mais avant cela, nous devons d’abord comprendre la différence entre la propriété et les attributs. Les attributs sont des valeurs d'attribut que vous définissez pour les balises HTML. Cela inclut la classe et l'identifiant que vous avez définis pour une balise et même la valeur initiale que vous avez définie pour la zone de saisie. Si vous ne définissez pas la valeur de l'attribut dans la balise mais que vous obtenez la valeur de l'attribut via attr(), un élément non défini se produira. prop() est également utilisé pour obtenir la valeur d'attribut d'un élément, mais la différence évidente avec attr() est que même si l'attribut que vous souhaitez obtenir n'est pas défini dans la balise html, il peut toujours renvoyer correctement l'attribut actuel requis. valeur.

Selon les recommandations officielles : les propriétés avec deux attributs vrai et faux, tels que vérifié, sélectionné ou désactivé, utilisent prop(), et d'autres utilisent attr().

Afin de refléter intuitivement la différence entre les deux, vous pouvez modifier la valeur de la zone de saisie immédiatement après le chargement de la page. À ce stade, vous constaterez que même si la valeur de votre zone de saisie change, utilisez attr. () pour l'obtenir. La valeur de la propriété ne changera pas à mesure que le texte change, mais la valeur de la propriété obtenue via property() changera à mesure que le contenu de la zone de texte change.

Regardez un exemple, nous avons ici une zone de saisie avec un ensemble de valeurs initiales et quelques ensembles d'attributs :

Copier le code Le code est le suivant :

Puis dans le code JQuery on écrit :

Copier le code Le code est le suivant :

console.log('La valeur de l'attribut est : ' $('#myTextBox').attr('value'));
console.log('La valeur de la propriété est : ' $('#myTextBox').prop('value'));

Nous constaterons que la valeur dans la zone de saisie obtenue via prop() est toujours synchronisée avec la valeur qu'elle contient, tandis que la valeur dans la zone de saisie obtenue via attr() est toujours définie dans la balise html.

Copier le code Le code est le suivant :

$('input[type="button"]').click(function () {
alert('La valeur de l'attribut est : ' $('#myTextBox').attr('value'));
alert('La valeur de la propriété est : ' $('#myTextBox').prop('value'));
});

Utiliser le filtre : coché

var isChecked = $('#myCheckBox:checked').length > Une autre méthode pour juger de la valeur de cet attribut consiste à ajouter un filtre : vérifié lors de la sélection des éléments, puis à juger l'attribut de l'élément en fonction de la longueur de l'élément obtenu. Mais cette utilisation n'est pas recommandée, car lorsque vous avez de nombreux groupes de cases à cocher sur votre page et que vous utilisez le sélecteur de classe au lieu du sélecteur d'identifiant, les réponses que vous obtenez peuvent être fausses.

Copier le code Le code est le suivant :

$('input[type="button"]').click(function () {
Si ($('#myCheckBox:checked').length > 0 ) {
//changez-le en alert('Its Checked'); si vous ne travaillez pas avec la console
console.log('C'est vérifié');
} autre {
console.log('Non, ce n'est pas coché');
>
});

Nous pouvons voir que nous disposons de plusieurs méthodes pour obtenir l'attribut sélectionné de l'élément de contrôle. C'est exactement ce que les développeurs Web doivent souvent utiliser et se perdent lorsqu'ils choisissent la bonne façon de l'utiliser.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tous ceux qui apprennent le javascript.

Veuillez prendre un moment pour partager l'article avec vos amis ou laisser un commentaire. Nous vous remercierons sincèrement pour votre soutien !