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>
