编程 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 相关文章推荐

拖动Html元素集合 Drag and Drop any item

Dec 22 Javascript

JavaScript 动态改变图片大小

Jun 11 Javascript

理解Javascript_02_理解undefined和null

Oct 11 Javascript

用js来解决ajax读取页面乱码

Nov 28 Javascript

禁止iframe页面的所有js脚本如alert及弹出窗口等

Sep 03 Javascript

javascript实现rgb颜色转换成16进制格式

Jul 10 Javascript

JavaScript代码因逗号不规范导致IE不兼容的问题

Feb 25 Javascript

js获取腾讯视频ID的方法

Oct 03 Javascript

javascript 删除数组元素和清空数组的简单方法

Feb 24 Javascript

Webpack打包慢问题的完美解决方法

Mar 16 Javascript

JS小球抛物线轨迹运动的两种实现方法详解

Dec 20 Javascript

JS和Canvas实现图片的预览压缩和上传功能

Mar 30 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 curl实现抓取302跳转后页面的示例

2014/07/04 PHP

PHP的pcntl多进程用法实例

2015/03/19 PHP

WordPress网站性能优化指南

2015/11/18 PHP

php 指定范围内多个随机数代码实例

2016/07/18 PHP

jQuery模拟点击A标记示例参考

2014/04/17 Javascript

JS判断移动端访问设备并加载对应CSS样式

2014/06/13 Javascript

jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析

2014/07/17 Javascript

express的中间件cookieParser详解

2014/12/04 Javascript

node.js中的buffer.length方法使用说明

2014/12/14 Javascript

jQuery使用CSS()方法给指定元素同时设置多个样式

2015/03/26 Javascript

JavaScript进阶练习及简单实例分析

2016/06/03 Javascript

js实现漫天星星效果

2017/01/19 Javascript

如何去除vue项目中的#及其ie9兼容性

2018/01/11 Javascript

vue.js动画中的js钩子函数的实现

2018/07/06 Javascript

js实现简单选项卡功能

2020/03/23 Javascript

element-ui 中的table的列隐藏问题解决

2018/08/24 Javascript

微信小程序用户位置权限的获取方法（拒绝后提醒）

2018/11/15 Javascript

layui问题之渲染数据表格时,仅出现10条数据的解决方法

2019/09/12 Javascript

vant 解决tab切换插件标题样式自定义的问题

2020/11/13 Javascript

基于Python __dict__与dir()的区别详解

2017/10/30 Python

Python实现高斯函数的三维显示方法

2018/12/29 Python

命令行运行Python脚本时传入参数的三种方式详解

2019/10/11 Python

python中time库的实例使用方法

2019/10/31 Python

Django框架models使用group by详解

2020/03/11 Python

IDLE下Python文件编辑和运行操作

2020/04/25 Python

python线性插值解析

2020/07/05 Python

PyQt5结合matplotlib绘图的实现示例

2020/09/15 Python

世界上最大的在线学习和教学市场：Udemy

2017/11/08 全球购物

美国在线艺术商店：HandmadePiece

2020/11/06 全球购物

家长会欢迎标语

2014/06/24 职场文书

个人求职自荐信范文

2015/03/06 职场文书

同学联谊会邀请函

2019/06/24 职场文书

《亲亲我的妈妈》观后感（3篇）

2019/09/26 职场文书

Matplotlib绘制混淆矩阵的实现

2021/05/27 Python

简单介绍Python的第三方库yaml

2021/06/18 Python

nginx作grpc的反向代理踩坑总结

2021/07/07 Servers