zoukankan      html  css  js  c++  java
  • 简单的单选和全选功能实现

     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         }
  • 相关阅读:
    python imageai 对象检测、对象识别
    flask跨域请求三行代码搞定
    图片压缩-KMeans
    电影天堂
    python 时间操作
    时间HTML
    3D滚动效果
    tensorflow基础
    studio显示Surface: getSlotFromBufferLocked: unknown buffer: 0xa2a58be0
    解决github访问慢和clone慢解决方案
  • 原文地址:https://www.cnblogs.com/qdjj/p/13143662.html
Copyright © 2011-2022 走看看