分别用js和jq实现百度全选反选效果
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>
