JavaScript实现复选框的全选/全不选(反选)功能

JavaScript基础

下载此实例

开发语言：js
实例大小：1.45KB
下载次数：13
浏览次数：200
发布时间：2019-11-19
实例类别：JavaScript基础
发布人：123da
文件格式：.html
所需积分：2

实例介绍

[下载地址]

【实例简介】

【实例截图】

from clipboard

【核心代码】

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>全选/全不选</title>
  
  <style type="text/css">
   li{
    list-style-type: none;
   }

  </style>
  <script type="text/javascript">
  //全选按钮
   function num1(){
   var aaa1 = document.getElementsByName("aaa")[0].checked;
   var num1 = document.getElementsByName("num");
   for(var i=0;i<num1.length;i ){
     num1[i].checked = aaa1;
   }
   }

   function num2(){
     var num2 = document.getElementsByName("num");
     var aaa2 = document.getElementsByName("aaa")[0];
     //当都没有选中时全选按钮为false
     for(var i=0;i<num2.length;i ){
      if(num2[i].checked ==false){
       aaa2.checked = false;
      }

     }

     //当有一个选中时全选按钮为true
     for(var i=0;i<num2.length;i ){
      if(num2[i].checked ==true){
       aaa2.checked = true;
      }
     }
   }

  </script>
</head>
<body>
  <ul>
   <li><input type="checkbox" name="aaa" onclick="num1()">全选/全不选</li>
  </ul>
  <ul>
   <li><input type="checkbox" name="num" onclick="num2()">1</li>
   <li><input type="checkbox" name="num" onclick="num2()">2</li>
   <li><input type="checkbox" name="num" onclick="num2()">3</li>
   <li><input type="checkbox" name="num" onclick="num2()">4</li>
  </ul>

</html>

标签： Javascript 全选反选

实例下载地址