communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jQuery implémente toutes les sélections et sélections inverses de cases à cocher

jQuery implémente toutes les sélections et sélections inverses de cases à cocher

高洛峰
Libérer： 2017-02-06 12:58:14
original
1347 Les gens l'ont consulté

Pas grand chose à dire, veuillez jeter un œil au code

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form>
 <label for="apple">苹果</label>
 <input type="checkbox" name="apple">
 <label for="banana">香蕉</label>
 <input type="checkbox" name="banana">
 <label for="orange">橘子</label>
 <input type="checkbox" name="orange">
 <input type="button" value="全选" onclick="allPick()">
 <input type="button" value="全不选" onclick="unAllPick()">
 <input type="button" value="反转" onclick="inverserPick()">
 </form>
 <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script>
 // 全选
 function allPick() {
  $("[type=checkbox]:checkbox").each(function () {
  this.checked = true;
  })
 }
 // 全不选
 function unAllPick() {
  $("[type=checkbox]:checkbox").each(function () {
  this.checked = false;
  })
 }
 // 反转
 function inverserPick() {
  $("[type=checkbox]:checkbox").each(function () {
  this.checked = !this.checked;
  })
 }
 </script>
</body>
</html>
Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide aux études ou au travail de chacun. , et j'espère également supporter davantage le site Web chinois !

Pour plus d'implémentations jQuery des articles à sélection totale et à sélection inverse sur les cases à cocher, veuillez faire attention au site Web PHP chinois !

Étiquettes associées：
jQuery 复选框 全选 反选
source：php.cn
Article précédent：JavaScript implémente toutes les sélections de cases à cocher ou sélection inverse Article suivant：JQuery implémente l'encapsulation de la sélection et l'inversion de la sélection de toutes les cases à cocher de la liste
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
Derniers articles par auteur
Derniers numéros
Comment sélectionner plusieurs cases à cocher dans Reactjs J'ai une liste d'options dans lesquelles je souhaite cocher plusieurs cases mais je n'y pa...
Depuis 2024-04-06 18:55:21
0
1
396
Filtre d'expression régulière pour les champs de recherche et les cases à cocher de la pile MERN J'essaie de comprendre comment la pile MERN fonctionne ensemble en apprenant par la pratiq...
Depuis 2024-04-06 14:53:12
0
1
425
Comment imprimer la valeur de la case à cocher sélectionnée après la soumission Ceci est ma liste de cases à cocher et les boutons dont j'ai besoin pour soumettre des don...
Depuis 2024-04-06 13:07:43
0
2
337
Case à cocher des conditions générales par défaut personnalisées dans Symfony 5 Je suis nouveau sur Symfony et j'essaie de créer ma page d'inscription. Le formulaire et l...
Depuis 2024-04-04 22:42:19
0
1
1365
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal