//这个案例知识点不多
复选框的checked属性 true false
true 选中 false 没有选中
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 4 <title>复选框（checkbox）全选/全不选/反选</title> 5 <style type="text/css"> 6 body,dl,dt,dd,p{margin:0;padding:0;} 7 body{font-family:Tahoma;font-size:12px;} 8 label,input,a{vertical-align:middle;} 9 label{padding:0 10px 0 5px;} 10 a{color:#09f;text-decoration:none;} 11 a:hover{color:red;} 12 dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;} 13 dt{padding-bottom:10px;border-bottom:1px solid #666;} 14 dt label{font-weight:700;} 15 p{margin-top:10px;} 16 </style> 17 </head> 18 <body> 19 <dl> 20 <dt> 21 <input id="checkAll" type="checkbox" /> 22 <label>全选</label> 23 <a href="javascript:;">反选</a> 24 </dt> 25 <dd> 26 <p><input name="item" type="checkbox"><label>选项（一）</label></p> 27 <p><input name="item" type="checkbox"><label>选项（二）</label></p> 28 <p><input name="item" type="checkbox"><label>选项（三）</label></p> 29 <p><input name="item" type="checkbox"><label>选项（四）</label></p> 30 <p><input name="item" type="checkbox"><label>选项（五）</label></p> 31 <p><input name="item" type="checkbox"><label>选项（六）</label></p> 32 <p><input name="item" type="checkbox"><label>选项（七）</label></p> 33 <p><input name="item" type="checkbox"><label>选项（八）</label></p> 34 <p><input name="item" type="checkbox"><label>选项（九）</label></p> 35 <p><input name="item" type="checkbox"><label>选项（十）</label></p> 36 </dd> 37 </dl> 38 <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center> 39 <script type="text/javascript"> 40 window.onload = function(){ 41 var input = document.getElementsByTagName("input"); 42 var a = document.getElementsByTagName("a")[0]; 43 var label = document.getElementsByTagName("label")[0]; 44 input[0].onclick = function(){ 45 46 for(var i=1;i<input.length;i++){ 47 input[i].checked = this.checked; 48 } 49 isCheck(); 50 }; 51 //反选 52 a.onclick = function(){ 53 for(var i=1;i<input.length;i++){ 54 input[i].checked = !input[i].checked; 55 } 56 }; 57 58 function isCheck(){ 59 label.innerHTML = input[0].checked ? "全选" : "全不选"; 60 } 61 62 }; 63 64 //这个案例知识点不多 65 //复选框的checked属性 true false 66 //true 选中 false 没有选中 67 </script> 68 </body> 69 </html>