js实现全选反选的功能

实现全选反选的功能,点击全选将所有内容选中,点击反选将选中的变成未选中的,将未选中的变成选中的,点击全不选将所有内容变成未选中状态。
js实现全选反选的功能_第1张图片

<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>

你可能感兴趣的:(javascript,开发语言,ecmascript)