1. 程式人生 > >8.全選,或取消全選

8.全選,或取消全選

pre document inpu 音樂 ntb ext mys color func

 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>

8.全選,或取消全選