简单的单选和全选功能实现
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 }