编程 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的数字改变的动画效果--可用来做计数器

Aug 11 Javascript

jQuery实现的Email中的收件人效果（按del键删除）

Mar 20 Javascript

JS中产生20位随机数以0-9为例也可以是a-z A-Z

Aug 01 Javascript

前端 Vue.js 和 MVVM 详细介绍

Dec 29 Javascript

vue自定义全局组件(自定义插件)的用法

Jan 30 Javascript

vue-cli下的vuex的简单Demo图解(实现加1减1操作)

Feb 26 Javascript

vue实现通讯录功能

Jul 14 Javascript

vue项目前端错误收集之sentry教程详解

May 27 Javascript

微信小程序自定义单项选择器样式

Jul 25 Javascript

Vue data的数据响应式到底是如何实现的

Feb 11 Javascript

详解vue beforeEach 死循环问题解决方法

Feb 25 Javascript

Vue路由守卫及页面登录权限控制的设置方法(两种)

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

德生S2000收音机更换“钕铁硼”全频扬声器

2021/03/02 无线电

php截取后台登陆密码的代码

2012/05/05 PHP

PHP简单获取多个checkbox值的方法

2016/06/13 PHP

Thinkphp5.0自动生成模块及目录的方法详解

2017/04/17 PHP

PHP实现微信小程序用户授权的工具类示例

2019/03/05 PHP

yii2.0框架多模型操作示例【添加/修改/删除】

2020/04/13 PHP

JavaScript高级程序设计客户端存储学习笔记

2011/09/10 Javascript

禁止ajax缓存获取程序最新数据的方法

2013/11/19 Javascript

JS判断表单输入是否为空(示例代码)

2013/12/23 Javascript

javascript实现des解密加密全过程

2014/04/03 Javascript

JS控制弹出新页面窗口位置和大小的方法

2015/03/02 Javascript

JavaScript实现前端分页控件

2017/04/19 Javascript

原生JS实现多个小球碰撞反弹效果示例

2018/01/31 Javascript

使用node打造自己的命令行工具方法教程

2018/03/26 Javascript

vue使用ajax获取后台数据进行显示的示例

2018/08/09 Javascript

vue自定义指令用法经典实例小结

2019/03/16 Javascript

关于Vue源码vm.$watch()内部原理详解

2019/04/26 Javascript

基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

2021/02/23 Vue.js

[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南

2016/06/25 DOTA

[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式

2017/08/09 DOTA

低版本中Python除法运算小技巧

2015/04/05 Python

Python 中的 else详解

2016/04/23 Python

基于python爬虫数据处理(详解)

2017/06/10 Python

Python实现模拟登录网易邮箱的方法示例

2018/07/05 Python

浅析Python与Mongodb数据库之间的操作方法

2019/07/01 Python

python基于socket进行端口转发实现后门隐藏的示例

2019/07/25 Python

Django CBV类的用法详解

2019/07/26 Python

马来西亚最热门的在线时尚商店：FashionValet

2018/11/11 全球购物

护士演讲稿优秀范文

2014/04/30 职场文书

汽车机电维修工求职信

2014/09/30 职场文书

党的群众路线教育实践活动批评与自我批评发言稿

2014/10/16 职场文书

群众路线调研报告范文

2014/11/03 职场文书

学校教师培训工作总结

2015/10/14 职场文书

《自己去吧》教学反思

2016/02/16 职场文书

初中物理教学反思

2016/02/19 职场文书

Python 如何利用ffmpeg 处理视频素材

2021/11/27 Python