js实现全选反选的功能

实现全选反选的功能，点击全选将所有内容选中，点击反选将选中的变成未选中的，将未选中的变成选中的，点击全不选将所有内容变成未选中状态。
在这里插入图片描述

<html>
      <head>
         <meta charset="UTF-8">
         <title>全选反选案例</title>
      </head>
      <body>
           <input type="checkbox" id="box" onclick="selAllorNot()"/>全选/反选</br>
           <input type="checkbox" name="hobbie"/>吃</br>
           <input type="checkbox" name="hobbie"/>喝</br>
           <input type="checkbox" name="hobbie"/>玩</br>
           <input type="checkbox" name="hobbie"/>乐</br>
           <input type="button" value="全选" onclick="selAll()"/>
           <input type="button" value="反选" onclick="reSel()"/>
           <input type="button" value="全不选" onclick="notSel()"/>
      </body>
</html>
<script>
function selAll(){
      
       //全选操作
  var hobbies = document.getElementsByName("hobbie");
  //用checked判断是否选中，true 选中，false未选中
  for(var i = 0;i<hobbies.length;i++){
      
      
      var hobbiesSelect = hobbies[i];
      hobbiesSelect.checked=true; }
}
function reSel(){
      
      //反选操作
  var hobbies = document.getElementsByName("hobbie");
  //用checked判断是否选中，true 选中，false未选中
  for(var i = 0;i<hobbies.length;i++){
      
      
      var hobbiesSelect = hobbies[i];
     if(hobbiesSelect.checked==true){
      
      
              hobbiesSelect.checked=false;
              }else{
      
        hobbiesSelect.checked=true; }
      }
}
function notSel(){
      
       // 全不选
//1.获取要操作的复选框,这个结果集是数组
  var hobbies = document.getElementsByName("hobbie");
for(var i = 0;i<hobbies.length;i++){
      
      
         var hobbiesSelect = hobbies[i];
          hobbiesSelect.checked=false;}
    }
// 全选/反选
function selAllorNot(){
      
      
   //1.获取要操作的复选框,这个结果集是数组
   var box = document.getElementById("box");
    if(box.checked==true){
      
      
         selAll();
        }else{
      
      	notSel(); }
  }
</script>

js实现全选反选的功能

猜你喜欢