全选练习

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

weixin_30736301

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

阅读量106

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zuiaimiusi/p/11247307.html

本文详细介绍了如何使用HTML和JavaScript实现网页上的全选、全不选和反选功能，通过实例代码展示了如何操作多选框的选中状态，并响应用户操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6 </head>
  7 <script type="text/javascript">
  8  window.onload=function(){
  9  var b01=document.getElementById("checkedAll");
 10  var a=document.getElementsByName("items");
 11  var checkAllBox=document.getElementById("checkAllBox");
 12  b01.onclick=function(){
 13    /*
 14    设置四个多选框变成选中状态
 15    通过多选框的checked属性可以来获取多选框的选中状态
 16    alert(a[i].checked);
 17    */
 18    for(var i=0;i<a.length;i++)
 19    {
 20    a[i].checked=true;
 21    }
 22    checkedAllBox.checked=true;
 23 
 24  };
 25   var b02=document.getElementById("notChecked");
 26   b02.onclick=function(){
 27   for(var i=0;i<a.length;i++){
 28   a[i].checked=false;
 29   }
 30 
 31   };
 32   var b03=document.getElementById("checkedReverse");
 33   b03.onclick=function(){
 34   for(var i=0;i<a.length;i++)
 35   a[i].checked=!a[i].checked;
 36   };
 37   /*
 38   提交按钮
 39   点击按钮，将所有选中的多选框的value属性值弹出
 40   为sent绑定单击响应函数
 41   */
 42   var send=document.getElementById("sent");
 43   sent.onclick=function(){
 44   for(var i=0;i<a.length;i++){
 45   if(a[i].checked)
 46   alert(a[i].value);
 47   }
 48   };
 49   /*
 50   全选/全不选多选框
 51   当它选中时，其余的也选中，当它取消时其余的也取消
 52   在响应函数中，响应函数是给谁绑定的，this就是谁
 53   */
 54   //为checkedAllBox绑定响应函数
 55   checkAllBox.onclick=function(){
 56   var flag=this.checked;
 57   for(var i=0;i<a.length;i++){
 58   a[i].checked=flag;
 59   }
 60   }
 61   /*
 62   如果四个多选框全都选中，则checkAllBox也应该选中
 63   如果四个多选框没都选中，则checkAllBox也不应该选中
 64   为四个多选框分别绑定单击响应函数
 65   */
 66   for(var i=0;i<a.length;i++)
 67   {
 68   a[i].onclick=function(){
 69   checkAllBox.checked=true;
 70    for(var j=0;j<a.length;j++){
 71    if(!a[j].checked){
 72     checkAllBox.checked=false;
 73     break;
 74    }
 75    }
 76   }
 77 
 78   }
 79  };
 80   </script>
 81 
 82 <body>
 83 <!--
 84 parentNode 表示当前节点的父节点
 85 previousSibling 表示当前节点的前一个兄弟节点(可以获取到空白的文本)
 86 previousElementSibling 获取前一个兄弟元素 ie8及以下不支持
 87 nextSibling 表示当前节点的后一个兄弟节点
 88 -->
 89 <form method="post" action="">
 90 你爱好的运动是？<input type="checkbox" id="checkAllBox"/>全选、全不选
 91 <br/>
 92 <input type="checkbox" name="items" value="football">football
 93 <input type="checkbox" name="items" value="basketball">basketball
 94 <input type="checkbox" name="items" value="baseball">baseball
 95 <br/>
 96 <input type="button" id="checkedAll" value="全 选"/>
 97 <input type="button" id="notChecked" value="全不选"/>
 98 <input type="button" id="checkedReverse" value="反选"/>
 99 <input type="button" id="sent" value="提交"/>
100 </form>
101 </body>
102 </html>