1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 ul { 9 list-style: none; 10 } 11 </style> 12 <script> 13 window.onload = function () { 14 function $(id){ 15 return document.getElementById(id); 16 } 17 function $arr(id){ 18 return document.getElementsByTagName(id); 19 } 20 var inputs=$("bottom").getElementsByTagName("input"); 21 /*$arr("button")[0].onclick = function () { 22 for(var i=0;i<inputs.length;i++){ 23 inputs[i].checked = true; 24 } 25 } 26 $arr("button")[1].onclick = function () { 27 for(var i=0;i<inputs.length;i++){ 28 inputs[i].checked = false; 29 } 30 }*/ 31 // 函数简化版 32 function all(flag){ 33 for(var i=0;i<inputs.length;i++){ 34 inputs[i].checked=flag; 35 } 36 } 37 $arr("button")[0].onclick = function () { 38 all(true); 39 } 40 $arr("button")[1].onclick = function () { 41 all(false); 42 } 43 $arr("button")[2].onclick = function () { 44 for(var i=0;i<inputs.length;i++){ 45 if(inputs[i].checked == true) 46 inputs[i].checked=false; 47 else 48 inputs[i].checked =true; 49 } 50 } 51 } 52 </script> 53 <body> 54 <div id="top"> 55 <button>全选</button> 56 <button>取消</button> 57 <button>反选</button> 58 </div> 59 <div id="bottom"> 60 <ul> 61 <li>选项: <input type="checkbox" /></li> 62 <li>选项: <input type="checkbox" /></li> 63 <li>选项: <input type="checkbox" /></li> 64 <li>选项: <input type="checkbox" /></li> 65 <li>选项: <input type="checkbox" /></li> 66 <li>选项: <input type="checkbox" /></li> 67 <li>选项: <input type="checkbox" /></li> 68 <li>选项: <input type="checkbox" /></li> 69 <li>选项: <input type="checkbox" /></li> 70 <li>选项: <input type="checkbox" /></li> 71 <li>选项: <input type="checkbox" /></li> 72 <li>选项: <input type="checkbox" /></li> 73 </ul> 74 </div> 75 </body> 76 </html>