1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>JS全选或取消全选</title> 7 <script type="text/javascript"> 8 9 function checkOrCancleAll(){ 10 11 var chkElt=document.getElementById("chkElt"); 12 var checked=chkElt.checked; 13 14 var allInterests=document.getElementsByName("interest"); 15 var mySpan=document.getElementById("mySpan"); 16 17 if(checked){ 18 19 for(var i=0;i<allInterests.length;i++){ 20 21 allInterests[i].checked=true; 22 23 } 24 mySpan.innerHTML="取消"; 25 26 }else{ 27 28 for(var i=0;i<allInterests.length;i++){ 29 30 allInterests[i].checked=false; 31 32 } 33 mySpan.innerHTML="全选"; 34 35 } 36 37 } 38 39 </script> 40 </head> 41 42 <body> 43 44 <input type="checkbox" id="chkElt" onclick="checkOrCancleAll()"/><span id="mySpan">全选</span></br> 45 46 运动<input type="checkbox" name="interest" value="sport"/></br> 47 旅游<input type="checkbox" name="interest" value="travel"/></br> 48 美食<input type="checkbox" name="interest" value="food"/></br> 49 睡觉<input type="checkbox" name="interest" value="sleep"/></br> 50 音乐<input type="checkbox" name="interest" value="music"/></br> 51 52 53 54 </body> 55 </html>