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

Add Formatted Data to a Spreadsheet

Jun 12 Javascript

50款非常棒的 jQuery 插件分享

Mar 29 Javascript

json格式的时间显示为正常年月日的方法

Sep 08 Javascript

js实现日期级联效果

Jan 23 Javascript

JavaScript子窗口调用父窗口变量和函数的方法

Oct 09 Javascript

jquery的checkbox,radio,select等方法小结

Aug 30 Javascript

纯原生js实现table表格的增删

Jan 05 Javascript

微信网页授权并获取用户信息的方法

Jul 30 Javascript

ng-events类似ionic中Events的angular全局事件

Sep 05 Javascript

jQuery 实现扁平式小清新导航

Jul 07 jQuery

JavaScript代码模拟鼠标自动点击事件示例

Aug 07 Javascript

Vue axios获取token临时令牌封装案例

Sep 11 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

在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)

2010/05/04 PHP

完美解决phpexcel导出到xls文件出现乱码的问题

2016/10/29 PHP

php提交表单时保留多个空格及换行的文本样式的方法

2017/06/20 PHP

JS日历推荐

2006/12/03 Javascript

[原创]js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结

2007/03/12 Javascript

Javascript基础教程之函数对象和属性

2015/01/18 Javascript

jQuery设置指定网页元素宽度和高度的方法

2015/03/25 Javascript

WordPress 单页面上一页下一页的实现方法【附代码】

2016/03/10 Javascript

JS 动态加载js文件和css文件同步/异步的两种简单方式

2016/09/23 Javascript

AngularJS出现$http异步后台无法获取请求参数问题的解决方法

2016/11/03 Javascript

js封装成插件的步骤方法

2017/09/11 Javascript

微信小程序tabBar用法实例详解

2017/12/04 Javascript

JavaScript递归函数定义与用法实例分析

2019/01/24 Javascript

微信小程序实现拨打电话功能的示例代码

2020/06/28 Javascript

vue 使用 sortable 实现 el-table 拖拽排序功能

2020/12/26 Vue.js

vue3.0封装轮播图组件的步骤

2021/03/04 Vue.js

[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事

2014/07/10 DOTA

Python3使用requests包抓取并保存网页源码的方法

2016/03/15 Python

详解使用python crontab设置linux定时任务

2016/12/08 Python

Python实现字符串格式化输出的方法详解

2017/09/20 Python

Python Threading 线程/互斥锁/死锁/GIL锁

2019/07/21 Python

python字符串反转的四种方法详解

2019/12/02 Python

Django ForeignKey与数据库的FOREIGN KEY约束详解

2020/05/20 Python

如何通过python实现IOU计算代码实例

2020/11/02 Python

html5使用canvas绘制一张图片

2014/12/15 HTML / CSS

Gweniss格温妮丝女包官网：英国纯手工制造潮流包包品牌

2018/02/07 全球购物

关于工资低的辞职信

2014/01/14 职场文书

报告会主持词

2014/04/02 职场文书

教师党员公开承诺事项

2014/05/28 职场文书

董事长助理工作职责范本

2014/07/01 职场文书

党员个人对照检查材料范文

2014/09/24 职场文书

校园游戏活动新闻稿

2014/10/15 职场文书

乐山大佛导游词

2015/02/02 职场文书

2015年招生工作总结

2015/05/04 职场文书

周一问候语大全

2015/11/10 职场文书

2016元旦晚会主持人开场白和结束语

2015/12/03 职场文书