编程 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学习基础知识小结

Nov 25 Javascript

JavaScript Math.floor方法(对数值向下取整)

Jan 09 Javascript

使用javascript实现雪花飘落的效果

Jan 13 Javascript

JavaScript将当前时间转换成UTC标准时间的方法

Apr 06 Javascript

Js动态设置rem来实现移动端字体的自适应代码

Oct 14 Javascript

详解react关于事件绑定this的四种方式

Mar 09 Javascript

Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客

Apr 26 Javascript

ES6 Array常用扩展的应用实例分析

Jun 26 Javascript

JavaScript数组去重实现方法小结

Jan 17 Javascript

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

Apr 11 Javascript

openlayers实现图标拖动获取坐标

Sep 25 Javascript

在Vue中使用CSS3实现内容无缝滚动的示例代码

Nov 27 Vue.js

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 Cookie的一个使用注意点

2008/11/08 PHP

javascript mouseover、mouseout停止事件冒泡的解决方案

2009/04/07 Javascript

制作高质量的JQuery Plugin 插件的方法

2010/04/20 Javascript

jQueryUI的Dialog的简单封装

2010/06/07 Javascript

将string解析为json的几种方式小结

2010/11/11 Javascript

来自国外的页面JavaScript文件优化

2010/12/08 Javascript

ExtJS实现文件下载的方法实例

2013/11/09 Javascript

解析jquery中的ajax缓存问题

2013/12/19 Javascript

js事件监听机制(事件捕获)总结

2014/08/08 Javascript

分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug

2016/01/10 Javascript

javascript中利用柯里化函数实现bind方法【推荐】

2016/04/29 Javascript

jquery插件treegrid树状表格的使用方法详解（.Net平台）

2017/01/03 Javascript

js实现图片上传预览原理分析

2017/07/13 Javascript

vue实现图片加载完成前的loading组件方法

2018/02/05 Javascript

bootstrap 路径导航分页进度条的实例代码

2018/08/06 Javascript

webpack 3.X学习之多页面打包的方法

2018/09/04 Javascript

JS/HTML5游戏常用算法之碰撞检测像素检测算法实例详解

2018/12/12 Javascript

微信小程序仿今日头条导航栏滚动解析

2019/08/20 Javascript

vue打包npm run build时候界面报错的解决

2020/08/13 Javascript

JavaScript实现页面高亮操作提示和蒙板

2021/01/04 Javascript

[02:30]DOTA2英雄基础教程暗影恶魔

2013/12/17 DOTA

python实现类的静态变量用法实例

2015/05/08 Python

PyQt5每天必学之切换按钮

2020/08/20 Python

Python Django给admin添加Action的方法实例详解

2019/04/29 Python

解决pycharm不能自动补全第三方库的函数和属性问题

2020/03/12 Python

如何使用Django Admin管理后台导入CSV

2020/11/06 Python

python3中TQDM库安装及使用详解

2020/11/18 Python

Myprotein瑞典官方网站：畅销欧洲英国运动营养品牌

2018/01/22 全球购物

个人求职信范例

2014/01/29 职场文书

大学新生军训感言

2014/02/25 职场文书

前处理组长岗位职责

2014/03/01 职场文书

学员自我鉴定

2014/03/19 职场文书

二手房买卖协议书

2014/04/10 职场文书

应届大学生自荐书

2014/06/17 职场文书

党员学习中共十八大思想报告

2014/09/12 职场文书

党员个人剖析材料（四风问题）

2014/10/07 职场文书