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 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
js实现网页随机验证码
Oct 19 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
工作中常用js功能汇总
Nov 07 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中$this-&amp;gt;含义分析
2009/11/29 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php向js函数传参的几种方法
2014/08/10 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
phpinfo的知识点总结
2019/10/10 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
js实现验证码功能
2020/07/24 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
详谈python read readline readlines的区别
2017/09/22 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Python连接Impala实现步骤解析
2020/08/04 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
运动会入场解说词300字
2014/01/25 职场文书
工程安全生产协议书
2014/11/21 职场文书