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

打豆豆小游戏用javascript编写的[打豆豆]小游戏

Jan 08 Javascript

js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

Jan 14 Javascript

基于jQuery实现仿百度首页换肤背景图片切换代码

Aug 25 Javascript

基于JavaScript实现移动端点击图片查看大图点击大图隐藏

Nov 04 Javascript

Vue.js动态组件解析

Sep 09 Javascript

smartupload实现文件上传时获取表单数据(推荐)

Dec 12 Javascript

jQuery+HTML5实现弹出创意搜索框层

Dec 29 Javascript

TypeScript类型声明书写详解

Aug 28 Javascript

vue 路由守卫(导航守卫)及其具体使用

Feb 25 Javascript

TypeScript的安装、使用、自动编译的实现

Apr 10 Javascript

Vue作用域插槽实现方法及作用详解

Jul 08 Javascript

js实现购物车商品数量加减

Sep 21 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获取英文姓名首字母的方法

2015/07/13 PHP

HR vs CL BO3 第一场 2.13

2021/03/10 DOTA

jQuery如何实现点击页面获得当前点击元素的id或其他信息

2014/01/09 Javascript

WordPress中利用AJAX技术进行评论提交的实现示例

2016/01/12 Javascript

Javascript实现苹果悬浮虚拟按钮

2016/04/10 Javascript

手机图片预览插件photoswipe.js使用总结

2016/08/25 Javascript

Vue2学习笔记之请求数据交互vue-resource

2017/02/23 Javascript

原生JS实现不断变化的标签

2017/05/22 Javascript

js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

2017/07/17 Javascript

详解封装基础的angular4的request请求方法

2018/06/05 Javascript

使用D3.js+Vue实现一个简单的柱形图

2018/08/05 Javascript

Vue自定义toast组件的实例代码

2018/08/15 Javascript

使用vue根据状态添加列表数据和删除列表数据的实例

2018/09/29 Javascript

用Object.prototype.toString.call(obj)检测对象类型原因分析

2018/10/11 Javascript

VuePress 快速踩坑小结

2019/02/14 Javascript

茶余饭后聊聊Vue3.0响应式数据那些事儿

2019/10/30 Javascript

javascript 易错知识点实例小结

2020/04/25 Javascript

[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队！”

2015/12/27 DOTA

Flask入门教程实例：搭建一个静态博客

2015/03/27 Python

python写入并获取剪切板内容的实例

2018/05/31 Python

python hash每次调用结果不同的原因

2019/11/21 Python

python线程信号量semaphore使用解析

2019/11/30 Python

python实现跨excel sheet复制代码实例

2020/03/03 Python

html5版canvas自由拼图实例

2014/10/15 HTML / CSS

使用Html5中的cavas画一面国旗

2019/09/25 HTML / CSS

在校生自我鉴定

2014/01/23 职场文书

房地产广告词大全

2014/03/19 职场文书

读书小明星事迹材料

2014/05/03 职场文书

尊老爱幼演讲稿

2014/09/04 职场文书

股东合作协议书

2014/09/12 职场文书

学生会干部自我鉴定2014

2014/09/18 职场文书

入党积极分子考察意见

2015/06/02 职场文书

高中开学感言

2015/08/01 职场文书

大学生安全教育主题班会

2015/08/12 职场文书

浅谈node.js中间件有哪些类型

2021/04/29 Javascript

教你使用Python pypinyin库实现汉字转拼音

2021/05/27 Python