JavaScript 实现的checkbox经典实例分享


Posted in Javascript onOctober 16, 2016

JavaScript 实现的checkbox经典实例分享

<!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 相关文章推荐
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
JS 控制非法字符的输入代码
2009/12/04 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
简单谈谈json跨域
2016/03/13 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
jQuery实现消息弹出框效果
2019/12/10 jQuery
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
个人自我剖析材料
2014/09/30 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python