masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > jQuery实现复选框的全选和反选

jQuery实现复选框的全选和反选

高洛峰
Lepaskan： 2017-02-06 12:58:14
asal
1452 orang telah melayarinya

话不多说，请看代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!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>

Salin selepas log masuk

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多jQuery实现复选框的全选和反选相关文章请关注PHP中文网！

Label berkaitan：
jQuery 复选框 全选 反选
Artikel sebelumnya：javascript实现复选框全选或反选 Artikel seterusnya：JQuery实现列表中复选框全选反选功能封装
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan