编程 Javascript

JavaScript 实现的checkbox经典实例分享

Posted in Javascript onOctober 16, 2016

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>邮件删除</title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  table{
  width: 400px;
  margin-left:200px;
  margin-top:20px;
  font-weight: bold;
  }
  th,td{
  padding: 7px;
  }
  #topOne{
  width: 80px;
  padding: 10px;
  }
  #topTwo{
  width: 120px;
  text-align: center;
  } 
  #topThree{
  width: 200px;
  text-align: center;
  }
  #endColspan{
  text-align: center;
  }
  #endColspan input{
  margin: 0 5px;
  }
 </style>
 </head>
 <body>
 <table border="2" cellspacing="0" cellpadding="">
  <!--第一行-->
  <tr id="top">
  <td id="topOne">
   <input type="checkbox" id="allInpTop" value="" />
   <span id="allSpanTop">全选</span>
  </td>
  <td id="topTwo">选择路线</td>
  <td id="topThree">请选择英雄</td>
  </tr>
  
  <!--第二行-->
  <tr id="content1">
  <td id="contentOne1">
   <input type="checkbox" name="" id="contentOne_input1" value="" />
  </td>
  <td id="contentTwo1">上单</td>
  <td id="contentThree1">德玛</td>
  </tr>
  <tr id="content2">
  <td id="contentOne2">
   <input type="checkbox" name="" id="contentOne_input2" value="" />
  </td>
  <td id="contentTwo2">中单</td>
  <td id="contentThree2">安妮</td>
  </tr>
  <tr id="content3">
  <td id="contentOne3">
   <input type="checkbox" name="" id="contentOne_input3" value="" />
  </td>
  <td id="contentTwo3">打野</td>
  <td id="contentThree3">螳螂</td>
  </tr>
  
  <!--第三行-->
  <tr id="end">
  <td id="endOne">
   <input type="checkbox" id="endOne_input" value="" />
   <span id="endOne_span">全选</span>
  </td>
  <td id="endColspan" colspan="2">
   <input type="button" name="" id="endColspan_btn1" value="全选" />
   <input type="button" name="" id="endColspan_btn2" value="取消全选" />
   <input type="button" name="" id="endColspan_btn3" value="反选" />
   <input type="button" name="" id="endColspan_btn4" value="删除所选邮件" />
  </td>
  </tr>
 </table>
 </body>
 <script type="text/javascript">
 
 var allInpTopObj = document.getElementById("allInpTop");
 
 var endOne_input = document.getElementById("endOne_input");
 
 var content1Obj = document.getElementById("content1");
 var content2Obj = document.getElementById("content2");
 var content3Obj = document.getElementById("content3");
 
 var contentOne_inputObj1 = document.getElementById("contentOne_input1");
 var contentOne_inputObj2 = document.getElementById("contentOne_input2");
 var contentOne_inputObj3 = document.getElementById("contentOne_input3");
 
 var endColspan_btn1Obj = document.getElementById("endColspan_btn1");
 
 var endColspan_btn2Obj = document.getElementById("endColspan_btn2");
 
 var endColspan_btn3Obj = document.getElementById("endColspan_btn3");
 
 var endColspan_btn4Obj = document.getElementById("endColspan_btn4");
 
 var luxianObj = document.getElementById("luxian");
 
 var renwuObj = document.getElementById("renwu");
 
 
 var strInput = [contentOne_inputObj1,contentOne_inputObj2,contentOne_inputObj3,allInpTopObj,endOne_input];
 
 var checks = [contentOne_inputObj1,contentOne_inputObj2,contentOne_inputObj3];
 
 var s = [content1Obj,content2Obj,content3Obj];
 
 
 var bool = true;
 var num;
 
 
 function pandaunFun () {
  if (allInpTopObj.checked = true) {
  allInpTopObj.checked = false;
  }
  if (endOne_input.checked = true) {
  endOne_input.checked = false;
  }
 }
 
 function allFun () {
  for (var i = 0; i < strInput.length; i++) {
  strInput[i].checked = true;//选中
  }
 }
 
 function cancelFun () {
  for (var i = 0; i < strInput.length; i++) {
  strInput[i].checked = false;//选中
  }
 }
 
 function unAllFun () {
  for (var i = 0; i < strInput.length; i++) {
  if (strInput[i].checked == true) {
   strInput[i].checked = false;//非选中
  } else{
   strInput[i].checked = true;//选中
  }
  }
  
  pandaunFun ();
 }
 
 function deleteFun () {
  for (var i = 0; i < s.length; i++) {
  if (checks[i].checked) {
   s[i].style.display = "none";
  }
  }
  
  pandaunFun ();
  
 }
 
 function numCheckFun () {
  num = 0;
  for (var j = 0; j < checks.length; j++) {
   
   if (checks[j].checked) {
   num++;
   }
  }
  
  if (num == checks.length) {
   allInpTopObj.checked = true;
   endOne_input.checked = true;
  }else{
   allInpTopObj.checked = false;
   endOne_input.checked = false;
  }
  }
 

 endColspan_btn1Obj.onclick = allFun;

 endColspan_btn2Obj.onclick = cancelFun;

 endColspan_btn3Obj.onclick = unAllFun;

 endColspan_btn4Obj.onclick = deleteFun;

 for (var i = 0; i < checks.length; i++) {
  checks[i].onclick = numCheckFun;
 }
 </script>
</html>

JavaScript 实现的checkbox经典实例分享

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

漂亮的jquery提示效果(仿腾讯弹出层)

Feb 05 Javascript

整理AngularJS中的一些常用指令

Jun 16 Javascript

jquery实现简单文字提示效果

Dec 02 Javascript

JavaScript弹出对话框的三种方式

Mar 23 Javascript

JavaScript中ES6字符串扩展方法

Aug 26 Javascript

JavaScript中return用法示例

Nov 29 Javascript

jQuery实现三级联动效果

Mar 02 Javascript

js数字滑动时钟的简单实现(示例讲解)

Aug 14 Javascript

Vuex实现计数器以及列表展示效果

Mar 10 Javascript

webpack常用构建优化策略小结

Nov 21 Javascript

浅谈vue中get请求解决传输数据是数组格式的问题

Aug 03 Javascript

Vue实现购物车基本功能

Nov 08 Javascript

JavaScript正则表达式实例详解

Oct 16 #Javascript

js实现碰撞检测特效代码分享

Oct 16 #Javascript

js+css3制作时钟特效

Oct 16 #Javascript

js实现可旋转的立方体模型

Oct 16 #Javascript

移动端滑动插件Swipe教程

Oct 16 #Javascript

类似于QQ的右滑删除效果的实现方法

Oct 16 #Javascript

js实现点击图片自动提交action的简单方法

Oct 16 #Javascript

You might like

PHP随机字符串生成代码(包括大小写字母)

2013/06/24 PHP

php处理带有中文URL的方法

2016/07/11 PHP

js 实现复制到粘贴板的功能代码

2010/05/13 Javascript

javascript 正则替换 replace(regExp, function)用法

2010/05/22 Javascript

js实现简单的星级选择器提交效果适用于评论等

2013/10/18 Javascript

JavaScript中的DSL元编程介绍

2015/03/15 Javascript

jQuery Form 表单提交插件之formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的应用

2016/01/23 Javascript

jQuery判断浏览器并动态调整select宽度的方法

2016/03/02 Javascript

JS 调试中常见的报错问题解决方法

2017/05/20 Javascript

详解tween.js的使用教程

2017/09/14 Javascript

利用JS判断客户端类型你应该知道的四种方法

2017/12/22 Javascript

jQuery实现的简单手风琴效果示例

2018/08/29 jQuery

详解从0开始搭建微信小程序(前后端)的全过程

2019/04/15 Javascript

解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

2019/09/27 Javascript

微信小程序中target和currentTarget的区别小结

2020/11/06 Javascript

[00:48]完美“圣”典2016风云人物：xiao8宣传片

2016/11/30 DOTA

Python封装shell命令实例分析

2015/05/05 Python

python基于pyDes库实现des加密的方法

2017/04/29 Python

利用Python将时间或时间间隔转为ISO 8601格式方法示例

2017/09/05 Python

Python可变参数*args和**kwargs用法实例小结

2018/04/27 Python

使用Python获取并处理IP的类型及格式方法

2018/11/01 Python

python使用thrift教程的方法示例

2019/03/21 Python

详解用pyecharts Geo实现动态数据热力图城市找不到问题解决

2019/06/26 Python

Python学习笔记之函数的定义和作用域实例详解

2019/08/13 Python

Python3.7+tkinter实现查询界面功能

2019/12/24 Python

英国运动风奢侈品购物网站：Maison De Fashion

2020/08/28 全球购物

描述RIP和OSPF区别以及特点

2015/01/17 面试题

医院护士见习期自我鉴定

2014/04/10 职场文书

珍惜时间演讲稿

2014/05/14 职场文书

2014年学校国庆主题活动方案

2014/09/16 职场文书

晋江市人民政府党组群众路线教育实践活动整改方案

2014/10/25 职场文书

2014年教研员工作总结

2014/12/23 职场文书

2014年个人年终总结

2015/03/09 职场文书

常住证明范本

2015/06/23 职场文书

初中班主任工作随笔

2015/08/15 职场文书

原生JS中应该禁止出现的写法

2021/05/05 Javascript