首页 > 代码库 > HTML页面中A博娱乐复选框的操作方法
HTML页面中A博娱乐复选框的操作方法
A博娱乐复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影。接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助。
第一个是关于复选框全选反选的操作,当然我在里面还加了一个小功能,就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态;反之亦然。
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title ></ title > < style > td{ border: 1px solid black; text-align: center; } table{ border: 1px solid black; } #opp{ border-radius: 50%; width: 20px; height: 20px; border: 1px style #eee; outline-style: none; } </ style > </ head > < body > < table > < tr > < td >< input id = "all" type = "checkbox" >全选</ td > < td width = "300px" >复选框全选示例</ td > </ tr > < tr > < td >< input class = "list" type = "checkbox" ></ td > < td ></ td > </ tr > < tr > < td >< input class = "list" type = "checkbox" ></ td > < td ></ td > </ tr > < tr > < td >< input class = "list" type = "checkbox" ></ td > < td ></ td > </ tr > < tr > < td >< input class = "list" type = "checkbox" ></ td > < td ></ td > </ tr > < tr > < td >< input class = "list" type = "checkbox" ></ td > < td ></ td > </ tr > < tr > < td >< input class = "list" type = "checkbox" ></ td > < td ></ td > </ tr > < tr > < td >< input class = "list" type = "checkbox" ></ td > < td ></ td > </ tr > < tr > < td >< input id = "opp" type = "button" >反选</ td > < td ></ td > </ tr > </ table > < script > var vll = document.getElementById("all"); var vlist=document.getElementsByClassName("list"); var vopp=document.getElementById("opp"); vll.onclick=function(){ for(var i=0;i< vlist.length ;i++){ vlist[i] .checked = vll .checked; } } for( var i = 0 ;i<vlist.length;i++){ vlist[i] .onclick = function (){ if(this.checked==false){ vll.checked = false ; } else{ for(var i2 = 0 ;i2<vlist.length;i2++){ if(vlist[i2].checked==false){ break; } if(i2>=vlist.length-1){ vll.checked=true; } } } } } vopp.onclick=function(){ for(var i=0;i< vlist.length ;i++){ vlist[i].checked=!vlist[i].checked; if(vlist[i].checked==false){ vll.checked = false ; } } } </script> </ body > </ html > |
第二个呢则是自定义复选框样式,就是可以将我们的复选框使用图片来替代,以增加酷炫的效果;而且这里我是完全运用CSS3的写法,不涉及JavaScript的;
?
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
|
<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title ></ title > < style > .box1{ width: 1000px; height: 50px; position: relative; } input{ width: 50px; height: 50px; opacity: 1; display: none; } input+label{ display: block; width: 50px; height: 50px; background: url(img/2.png); background-size: 100%; } input:checked+label{ background: url(img/1.PNG); background-size: 100%; } </ style > </ head > < body > < div class = "box1" > < input type = "checkbox" name = "" id = "input1" value = "" /> < label for = "input1" ></ label > </ div > < div class = "box2" > < input type = "checkbox" name = "" id = "input2" value = "" /> < label for = "input2" ></ label > </ div > < div class = "box3" > < input type = "checkbox" name = "" id = "input3" value = "" /> < label for = "input3" ></ label > </ div > </ body > </ html > |
推荐网址:www.yxin7.com
HTML页面中A博娱乐复选框的操作方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。