1 <html> 2 <head></head> 3 <body> 4 <div id="places"> 5 <input type="checkbox" name="chx" value="1" onclick="_check_status(this)"/>香港 6 <input type="checkbox" name="chx" value="2" onclick="_check_status(this)"/>澳门 7 <input type="checkbox" name="chx" value="3" onclick="_check_status(this)"/>深圳 8 <input type="checkbox" name="chx" value="4" onclick="_check_status(this)"/>台北 9 <input type="checkbox" name="chx" value="5" onclick="_check_status(this)"/>乌镇 10 </div> 11 12 <div id="allplaces"> 13 <input type="checkbox" id="checkall" name="chx" value="0" onclick="_check_all(this)"/>全选 14 </div> 15 </body> 16 <script> 17 //点击“全选”， 所有地方都选上 18 function _check_all(obj) 19 { 20 var nodes = document.getElementById("places").childNodes; 21 if(obj.checked) 22 { 23 for (var i=0; i < nodes.length; i++) 24 { 25 if(nodes[i].type == "checkbox") 26 { 27 nodes[i].checked = true; 28 } 29 } 30 } 31 else 32 { 33 for (var i=0; i < nodes.length; i++) 34 { 35 if(nodes[i].type == "checkbox") 36 { 37 nodes[i].checked = false; 38 } 39 } 40 } 41 } 42 43 //每一个checkbox的状态校验 44 function _check_status(obj) 45 { 46 var nodes = document.getElementById("places").childNodes; 47 if(obj.checked) 48 { 49 for (var i=0; i < nodes.length; i++) 50 { 51 if((nodes[i].type == "checkbox") && !nodes[i].checked) 52 { 53 document.getElementById("checkall").checked = false; 54 return; 55 } 56 } 57 58 document.getElementById("checkall").checked = true; 59 } 60 else 61 { 62 document.getElementById("checkall").checked = false; 63 } 64 } 65 66 </script> 67 </html>