JS实现简单的多选选项的全选反选按钮

最新推荐文章于 2022-12-24 15:40:12 发布

weixin_30338481

最新推荐文章于 2022-12-24 15:40:12 发布

阅读量465

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/vieta/p/10833395.html

版权

 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>