复选框的全选和取消全选
复制代码
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>复选框的全选和取消全选</title> </head> <body> <script type="text/javascript"> /* window.onload = function(){ var firstChk = document.getElementById("firstChk"); firstChk.onclick = function(){ // 获取第一个复选框的选中状态(复选框对象checkbox对象) //alert(firstChk.checked); // 根据name获取所有元素 var aihaos = document.getElementsByName("aihao"); if(firstChk.checked){ // 全选 for(var i = 0; i < aihaos.length; i++){ aihaos[i].checked = true; } }else{ // 取消全选 for(var i = 0; i < aihaos.length; i++){ aihaos[i].checked = false; } } } } */ window.onload = function(){ var aihaos = document.getElementsByName("aihao"); var firstChk = document.getElementById("firstChk"); firstChk.onclick = function(){ for(var i = 0; i < aihaos.length; i++){ aihaos[i].checked = firstChk.checked; } } // 对以上数组进行遍历 var all = aihaos.length; for(var i = 0; i < aihaos.length; i++){ aihaos[i].onclick = function(){ var checkedCount = 0; // 总数量和选中的数量相等的时候,第一个复选框选中. for(var i = 0; i < aihaos.length; i++){ if(aihaos[i].checked){ checkedCount++; } } firstChk.checked = (all == checkedCount); /* if(all == checkedCount){ firstChk.checked = true; }else{ firstChk.checked = false; } */ } } } </script> <input type="checkbox" id="firstChk"/><Br> <input type="checkbox" name="aihao" value="smoke" />抽烟<Br> <input type="checkbox" name="aihao" value="drink" />喝酒<Br> <input type="checkbox" name="aihao" value="tt" />烫头<Br> </body> </html>
最后
以上就是故意小土豆最近收集整理的关于复选框的全选和取消全选复选框的全选和取消全选的全部内容,更多相关复选框内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复