1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!-- 5 需求: 6 1.写三个按钮： 7 第一个全选 8 第二个取消全选 9 第三个反选 10 2.统计，当前选中了多少首歌曲：“当前选中9首，共14首” 11 --> 12 <meta charset="UTF-8"> 13 <title>js实现全选，反选</title> 14 <script type="application/javascript"> 15 function cc(number){ 16 //获取所有checkbok对象 17 var chekboxs=document.getElementsByName("song") 18 for(var i=0;i<chekboxs.length;i++){ 19 if(number==1){ 20 chekboxs[i].checked=true 21 } 22 else if(number==2){ 23 chekboxs[i].checked=false 24 }else if(number==3){ 25 chekboxs[i].checked=!chekboxs[i].checked 26 } 27 } 28 statistics() 29 } 30 function statistics(){ 31 var span= document.getElementById("mySpan") 32 var checkbox=document.getElementsByName("song") 33 var total= checkbox.length 34 var current=0; 35 for(var i=0;i<total;i++){ 36 if(checkbox[i].checked){ 37 current++ 38 } 39 } 40 span.innerHTML="当前选中"+current+"首，共"+total+"首" 41 } 42 </script> 43 </head> 44 <input type="button" value="全选" onclick="cc(1)"/> 45 <input type="button" value="取消全选" onclick="cc(2)"/> 46 <input type="button" value="反选" onclick="cc(3)"/> 47 <hr/> 48 <body> 49 <input type="checkbox" name="song" onclick="statistics()"/> 铁血丹心<br/> 50 <input type="checkbox" name="song" onclick="statistics()"/> 火<br/> 51 <input type="checkbox" name="song" onclick="statistics()"/> 大海<br/> 52 <input type="checkbox" name="song" onclick="statistics()"/> 好汉歌<br/> 53 <input type="checkbox" name="song" onclick="statistics()"/> 我们不一样<br/> 54 <input type="checkbox" name="song" onclick="statistics()"/> 成都<br/> 55 <input type="checkbox" name="song" onclick="statistics()"/> 半壶纱<br/> 56 <input type="checkbox" name="song" onclick="statistics()"/> 你还要我怎样<br/> 57 <input type="checkbox" name="song" onclick="statistics()"/> 一生所爱<br/> 58 <input type="checkbox" name="song" onclick="statistics()"/> 追光者<br/> 59 <span id="mySpan"></span> 60 </body> 61 </html>