input框全选&反选

最新推荐文章于 2024-11-21 12:13:24 发布

原创最新推荐文章于 2024-11-21 12:13:24 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #css

这段代码展示了如何使用JavaScript实现复选框全选和反选的功能。当全选按钮被点击时，所有复选框的状态会随之改变；反之，当任一复选框被点击时，全选按钮的状态也会相应更新。通过事件监听和循环遍历，实现了复选框状态与全选按钮状态的同步。

  var c_all = document.getElementById('c_all')
  var box = document.getElementById('cbox').getElementsByTagName('input')
  c_all.onclick = function(){
    for(var i = 0;i<box.length;i++){
      box[i].checked = this.checked
    }
  }
  for(var i = 0;i<box.length;i++){  //先for循环给每一个框绑定点击事件
    box[i].onclick = function(){
      flag = true                   //初始全选框为true ，选中
      for(var i = 0;i<box.length;i++){  //for循环   判断每一个框，有一个框没被选中，
        if(!box[i].checked){             //就把false 给 falg。让全选框为false。否则全选框为选中状态
          flag = false
          break; //优化，只要有一个没选中就为false，即可结束循环，后面的无需判断
        }
      }
      c_all.checked = flag
    }
  }