简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

jQuery implements all selection and inverse selection of check boxes

高洛峰
Release： 2017-02-06 12:58:14
Original
1273 people have browsed it

Not much to say, please look at the 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>
Copy after login

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website. !

For more jQuery implementation of all-select and inverse-select articles on check boxes, please pay attention to the PHP Chinese website!

Related labels：
jQuery 复选框 全选 反选
source：php.cn
Previous article：JavaScript implements all checkbox selection or inverse selection Next article：JQuery implements the encapsulation of selecting and inverting the selection of all check boxes in the list
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS Tips: How to Style Checkboxes Using CSS I'm trying to style a checkbox using: <inputtype="checkbox" style="borde...
From 2023-10-08 16:37:48
0
2
325
Implementing an updateable form recordset using stored procedures I'm trying to set up a form with a recordset based on a stored procedure on a MySQL server...
From 2023-09-13 14:06:48
0
1
259
How can I send the id of a checked checkbox containing a category to ajax and display the subcategories related to that checked checkbox? I successfully send the checkbox value which is the category id when the checkbox is check...
From 2023-09-12 22:54:35
0
1
216
Uncaught ReferenceError: e is not defined in HTMLInputElement.onclick I get this error when e is a MouseEvent. The HTML involving the checkbox click event in qu...
From 2023-09-12 14:10:18
0
1
257
My javascript function only works when the page is fully loaded I want to disable the input text after the user clicks on other input tag that has checkbo...
From 2023-09-11 16:31:59
0
1
227
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！