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

Hutia 的 JS 代码集

Oct 24 Javascript

Autocomplete Textbox Example javascript实现自动完成成功

Aug 17 Javascript

不懂JavaScript应该怎样学

Apr 16 Javascript

jquery 之 $().hover(func1, funct2)使用方法

Jun 14 Javascript

使用js判断数组中是否包含某一元素(类似于php中的in_array())

Dec 12 Javascript

jQuery获取(选中)单选,复选框,下拉框中的值

Feb 21 Javascript

jquery仿百度百科底部浮动导航特效

Aug 08 Javascript

jQuery.form插件的使用及跨域异步上传文件

Apr 27 Javascript

Node.js的基本知识简单汇总

Sep 19 Javascript

微信小程序 http请求封装详解及实例代码

Feb 15 Javascript

jquery实现异步加载图片（懒加载图片一种方式）

Apr 24 jQuery

15分钟上手vue3.0(小结)

May 20 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连接MySQL代码的参数说明

2008/06/07 PHP

php定时计划任务与fsockopen持续进程实例

2014/05/23 PHP

PHP基于自定义函数生成笛卡尔积的方法示例

2017/09/30 PHP

PHPCrawl爬虫库实现抓取酷狗歌单的方法示例

2017/12/21 PHP

PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解

2018/04/20 PHP

JavaScript词法作用域与调用对象深入理解

2012/11/29 Javascript

JS控制表单提交的方法

2015/07/09 Javascript

jquery简单实现带渐显效果的选项卡菜单代码

2015/09/01 Javascript

小白谈谈对JS原型链的理解

2016/05/03 Javascript

AngularJS基础 ng-href 指令用法

2016/08/01 Javascript

angularjs 中$apply，$digest，$watch详解

2016/10/13 Javascript

js 实现一些跨浏览器的事件方法详解及实例

2016/10/27 Javascript

JS实现的自动打字效果示例

2017/03/10 Javascript

JavaScript中使用import 和require打包后实现原理分析

2018/03/07 Javascript

Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

2018/08/12 Javascript

小程序点击图片实现自动播放视频

2020/05/29 Javascript

基于vue-cli搭建多模块且各模块独立打包的项目

2019/06/12 Javascript

在Python的列表中利用remove()方法删除元素的教程

2015/05/21 Python

python3.4+pycharm 环境安装及使用方法

2019/06/13 Python

Python对接 xray 和微信实现自动告警

2019/09/17 Python

Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析

2019/12/26 Python

解决reload(sys)后print失效的问题

2020/04/25 Python

python图片验证码识别最新模块muggle_ocr的示例代码

2020/07/03 Python

Django项目创建及管理实现流程详解

2020/10/13 Python

10个很棒的 CSS3 开发工具推荐

2011/05/16 HTML / CSS

css3制作彩色边线3d立体按钮的示例(css3按钮)

2014/05/06 HTML / CSS

HTML5进阶段内联标签汇总（小篇）

2016/07/13 HTML / CSS

英国女性时尚品牌：Apricot

2018/12/04 全球购物

人力资源主管职责范本

2014/03/05 职场文书

社会调查研究计划书

2014/05/01 职场文书

服务理念标语

2014/06/18 职场文书

2015年事业单位工作总结

2015/04/27 职场文书

地雷战观后感

2015/06/09 职场文书

新闻稿怎么写

2015/07/18 职场文书

2016教师国培研修感言

2015/12/08 职场文书

《社戏》教学反思

2016/02/22 职场文书