JS實現簡單的多選選項的全選反選按鈕

本文轉載自查看原文 2019-05-08 17:48 635

 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue實現簡單的全選、反選、不選 JS實現全選、不選、反選 js反選/全選 Android 帶checkbox的listView 實現多選，全選，反選，刪除 vue實現全選反選 jquery簡單實現復選框的全選與反選 Vue.js實現checkbox的全選和反選 js實現表單項的全選、反選以及刪除操作【jquery】一個簡單的單選、多選、全選、反選、刪除的小功能 jQuery實現全選、反選和不選功能