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 相关文章推荐
jQuery select操作控制方法小结
May 26 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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中利用post传递字符串重定向的实现代码
2011/04/21 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
简单实现PHP留言板功能
2016/12/21 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
Prototype String对象 学习
2009/07/19 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
详解vue-router 初始化时做了什么
2018/06/11 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
Python编写百度贴吧的简单爬虫
2015/04/02 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python标准库os库的函数介绍
2020/02/12 Python
Python sorted对list和dict排序
2020/06/09 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
数控技术应用个人求职信范文
2014/02/03 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
中秋节活动总结
2014/08/29 职场文书
代理人委托书
2014/09/16 职场文书
银行自荐信范文
2015/03/25 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL