简单的单选和全选功能实现

 1 全选
 2     <input type="checkbox" id="quanxuan" >
 3     <br>
 4     单选
 5     <input type="checkbox" class="item">
 6     <br>
 7     单选
 8     <input type="checkbox" class="item">
 9     <br>
10     单选
11     <input type="checkbox" class="item">
12     <br>
13     单选
14     <input type="checkbox" class="item">
15     <br>
16     单选
17     <input type="checkbox" class="item">

// 获得全选按钮的节点和所有单选的节点

1     var quanbu = document.getElementById('quanxuan')
2     var danxuan = document.getElementsByClassName('item')

// 全选点击的时候让单选按钮也和全选一种状态

1 quanbu.onchange=function(){
2             for(var i = 0;i<danxuan.length;i++){
3                 danxuan[i].checked = this.checked
4            }
5        }

// 循环所有单选按钮并加事件

1 for(var i = 0;i<danxuan.length;i++){
2             danxuan[i].onchange=function(){
3                 panduandanxuan()
4             }
5         }

 1 // 单选按钮事件
 2         var panduandanxuan = function(){
 3             // 定义一个计数器
 4             var count = 0
 5             // 每有一个单选为true就加一
 6             for(var a = 0;a<danxuan.length;a++){
 7                 if(danxuan[a].checked == true){
 8                     count++
 9                 }
10                 // 当计数器等于所有单选按钮的length时全选选中
11                 if(count == danxuan.length){
12                     quanbu.checked = true
13                     // 否则不选中
14                 }else{
15                     quanbu.checked = false
16                 }
17             }
18         }