js实现过程
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 li {
8 height: 30px;
9 line-height:30px;
10 list-style: none;
11 font-size: 24px;
12 }
13 .b1 {
14 background: #CCCCCC;
15 }
16 .b2 {
17 background: yellow;
18 }
19 .b3 {
20 background: orange;
21 }
22 .b4 {
23 background: red;
24 }
25 </style>
26 <script>
27 /*
28 * 当鼠标移入li的时候
29 * 当前li对应的checkbox是否是选中的
30 * 是：li的className = ‘b4‘
31 * 否：li的className = ‘b3‘
32 * 当鼠标移出li的时候
33 * 当前li对应的checkbox是否是选中的
34 * 是：li的className = ‘b4‘
35 * 否：li的className = 原来隔行变色的时候设置的class
36 * */
37 window.onload = function() {
38
39 var ul1 = document.getElementById(‘ul1‘);
40 var lis = document.querySelectorAll(‘li‘);
41 var checkBoxes = ul1.querySelectorAll(‘input‘);
42 var checkAll = document.getElementById(‘checkAll‘);
43
44 //给每一个li添加不同的样式
45 for (var i=0; i<lis.length; i++) {
46
47 lis[i].index = i;
48 checkBoxes[i].index = i;
49
50 //通过i%2判断i是奇数还是偶数
51 if ( i % 2 == 0 ) {
52 lis[i].className = ‘b1‘;
53 lis[i].bc = ‘b1‘;
54 } else {
55 lis[i].className = ‘b2‘;
56 lis[i].bc = ‘b2‘;
57 }
58
59 //当鼠标移入的时候
60 lis[i].onmouseover = function() {
61 if ( checkBoxes[this.index].checked == true ) {
62 this.className = ‘b4‘;
63 } else {
64 this.className = ‘b3‘;
65 }
66 }
67
68 //当鼠标移出的时候
69 lis[i].onmouseout = function() {
70 if ( checkBoxes[this.index].checked == true ) {
71 this.className = ‘b4‘;
72 } else {
73 this.className = this.bc;
74 }
75
76 }
77
78
79 checkBoxes[i].onclick = function() {
80 if ( this.checked == true ) {
81 lis[this.index].className = ‘b4‘;
82 }
83
84 var isCheckedAll = true;
85 for (var i=0; i<checkBoxes.length; i++) {
86 //console.log(checkBoxes[i].checked)
87 if (checkBoxes[i].checked == false) {
88 isCheckedAll = false;
89 }
90 }
91 console.log(isCheckedAll)
92 checkAll.checked = isCheckedAll;
93 }
94
95 }
96
97 //全选
98 checkAll.onclick = function() {
99 for (var i=0; i<checkBoxes.length; i++) {
100 checkBoxes[i].checked = this.checked;
101 if (this.checked) {
102 lis[i].className = ‘b4‘;
103 } else {
104 lis[i].className = lis[i].bc;
105 }
106 }
107 }
108
109 }
110 </script>
111 </head>
112 <body>
113
114 <div id="ul1">
115 <li><input type="checkbox"> javascript</li>
116 <li><input type="checkbox"> html</li>
117 <li><input type="checkbox"> css</li>
118 <li><input type="checkbox"> html5</li>
119 <li><input type="checkbox"> css3</li>
120 <li><input type="checkbox"> nodejs</li>
121 </div>
122 <input type="checkbox" id="checkAll">全选
123
124 </body>
125 </html>
jq的写法：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
6 <script type="text/javascript">
7 //高版本的jq库有个bug。低版本的jq中是可以的
8 $(function(){
9 var chkAll = $(‘#chkAll‘);
10 var chkNone = $(‘#chkNone‘);
11 var chkReverse = $(‘#chkReverse‘);
12 var checkbox = $(‘#checkbox>:checkbox‘);
13 console.log(checkbox);
14
15 chkAll.click(function(){
16 //checkbox.attr(‘checked‘,‘checked‘);
17 checkbox.attr(‘checked‘,true);
18 });
19 chkNone.click(function(){
20 //checkbox.removeAttr(‘checked‘);
21 checkbox.attr(‘checked‘,false);
22 });
23 chkReverse.click(function(){
24 checkbox.each(function(){
25 $(this).attr(‘checked‘,!$(this).attr(‘checked‘));
26 });
27 });
28
29 });
30 </script>
31 </head>
32 <body>
33 <div id="checkbox">
34 <input type="checkbox" name="" id="" checked="checked">吃
35 <input type="checkbox" name="" id="">喝
36 <input type="checkbox" name="" id="">玩
37 <input type="checkbox" name="" id="">乐
38 <input type="checkbox" name="" id="">打豆豆
39 </div>
40 <div id="btn">
41 <input type="button" id="chkAll" value="全选">
42 <input type="button" id="chkNone" value="全不选">
43 <input type="button" id="chkReverse" value="反选">
44 </div>
45 </body>
46 </html>
时间： 2024-10-24 07:15:29