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

关于二级域名下使用一级域名下的COOKIE的问题

Nov 07 Javascript

treepanel动态加载数据实现代码

Dec 15 Javascript

js 自定义个性下拉选择框示例

Aug 20 Javascript

jQuery+Ajax实现无刷新操作

Jan 04 Javascript

JavaScript职责链模式概述

Sep 17 Javascript

jQuery EasyUI中的日期控件DateBox修改方法

Nov 09 Javascript

js调用屏幕宽度的简单方法

Nov 14 Javascript

基于JavaScript实现数码时钟效果

Mar 30 Javascript

vue实现点击图片放大效果

Aug 15 Javascript

VUE 全局变量的几种实现方式

Aug 22 Javascript

详解Vue一个案例引发「内容分发slot」的最全总结

Dec 02 Javascript

20多个小事例带你重温ES10新特性(小结)

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

怎么样可以把 phpinfo()屏蔽掉?

2006/11/24 PHP

浅谈PHP正则中的捕获组与非捕获组

2016/07/18 PHP

php原生导出excel文件的两种方法(推荐)

2016/11/19 PHP

PHP对称加密算法（DES/AES）类的实现代码

2017/11/14 PHP

PHP递归统计系统中代码行数

2019/09/19 PHP

php输出反斜杠的实例方法

2019/09/19 PHP

PHP使用JpGraph绘制折线图操作示例【附源码下载】

2019/10/18 PHP

JS 控制非法字符的输入代码

2009/12/04 Javascript

Dom与浏览器兼容性说明

2010/10/25 Javascript

Javascript 自适应高度的Tab选项卡

2011/04/05 Javascript

JavaScript实现x秒后自动跳转到一个页面

2013/01/03 Javascript

javascript-简单的日历实现及Date对象语法介绍(附图)

2013/05/30 Javascript

jQuery实现图片信息的浮动显示实例代码

2013/08/28 Javascript

JavaScript实现班级随机点名小应用需求的具体分析

2014/05/12 Javascript

JQuery打造省市下拉框联动效果

2014/05/18 Javascript

js中函数调用的两种常用方法使用介绍

2014/07/17 Javascript

javascript实现网页背景烟花效果的方法

2015/08/06 Javascript

js+html5实现的自由落体运动效果代码

2016/01/28 Javascript

简单谈谈json跨域

2016/03/13 Javascript

JS中关于事件处理函数名后面是否带括号的问题

2016/11/16 Javascript

javascript 数组去重复(在线去重工具)

2016/12/17 Javascript

强大的 Angular 表单验证功能详细介绍

2017/05/23 Javascript

vue router路由嵌套不显示问题的解决方法

2017/06/17 Javascript

Vue.js常用指令之循环使用v-for指令教程

2017/06/27 Javascript

微信小程序基于canvas渐变实现的彩虹效果示例

2019/05/03 Javascript

jquery使用echarts实现有向图可视化功能示例

2019/11/25 jQuery

jQuery实现消息弹出框效果

2019/12/10 jQuery

解决echarts echarts数据动态更新和dataZoom被重置问题

2020/07/20 Javascript

[04:45]上海特级锦标赛主赛事第三日TOP10

2016/03/05 DOTA

Python之——生成动态路由轨迹图的实例

2019/11/22 Python

PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解

2020/03/24 Python

Python自动化测试中yaml文件读取操作

2020/08/20 Python

美国瑜伽服装和装备购物网站：Mukha Yoga

2019/02/22 全球购物

个人自我剖析材料

2014/09/30 职场文书

2015年客房服务员工作总结

2015/05/15 职场文书

Anaconda配置各版本Pytorch的实现

2021/08/07 Python