38、全选练习

最新推荐文章于 2022-05-16 15:19:06 发布

五仁卤鸡翅

最新推荐文章于 2022-05-16 15:19:06 发布

阅读量175

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/MoonNight608/article/details/106855796

版权

JS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文章目录

介绍
全选/全部选练习

介绍

本文是在学习JS所做的学习笔记，所有笔记内容请看：JS学习笔记

全选/全部选练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script>
   window.onload=function(){
   
     1、全选
      var items=document.getElemetsByName("items");
      var checkedAllBtn=document.getElementById("checkAllBtn");
      checkedAllBtn.onclick=function(){
           // 获取多选框
           var items=document.getElemetsByName("items");
           // 复选框变成选中状态
           for(var i=0;i<items.length;i++){
               items[i].checked=true;
           }
           checkAllbox.checked=true;
       }
       
  
     2、复选框 全选/全不选
      var checkedAllbox=document.getElementById("checkAllbox");
      checkedAllbox.onclick=function(){
          for(let i=0;i<items.length;i++){
              items[i].checked=this.checked
          }
      }
   }
   
  
  3、如果四个多选框全都选中，则checkedAllBox也应选中
     如果四个多选框没都选中，则checkAllbox也不应选中
     
    // 为四个多选框分别绑定单击
   for(var i=0;i<items.length;i++){
       items[i].onclick=function(){
           // 判断四个多选框是否全选
           // 只要一个没选中，就不是全选
           
           // 先将全选/非全选选中,然后再在下面的for循环中
           // 进行判断，取消
           checkAllbox.checked=true;
           for(var j=0；j<=items.length;j++){
               if(!items[i].checked){
                   checkedAllBox.checked=false;
                   break;
               }
           }
       }
   }
    
   </script>
</head>
<body> 

<form method="post" action="">
 <input type="checkAllbox" name="items" value="全选/全不选"/>全选/全不选
   <input type="checkbox" name="items" value="足球"/>足球
   <input type="checkbox" name="items" value="篮球"/>篮球
   <input type="checkbox" name="items" value="羽毛球"/>羽毛球
   
    <input type="checkbox" id="checkAllbtn" value="全选"/>全选
   <input type="checkbox" name="checkNobtn" value="全不选"/>全不选
   <input type="checkbox" name="checkRevbtn" value="反选"/>反选
</form>
 
</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
38、全选练习

文章目录介绍全选/全部选练习介绍本文是在学习JS所做的学习笔记，所有笔记内容请看：JS学习笔记全选/全部选练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ 1、全选
复制链接

扫一扫