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

获取客户端电脑日期时间js代码(jquery)

Sep 12 Javascript

漂亮的jquery提示效果(仿腾讯弹出层)

Feb 05 Javascript

JSON辅助格式化处理方法

Mar 26 Javascript

5个JavaScript经典面试题

Oct 13 Javascript

jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

Sep 27 Javascript

jquery对dom节点的操作【推荐】

Apr 15 Javascript

BootStrap3中模态对话框的使用

Jan 06 Javascript

微信小程序实现缓存根据不同的id来进行设置和读取缓存

Jun 12 Javascript

详谈javascript精度问题与调整

Jul 08 Javascript

JavaScript原型链与继承操作实例总结

Aug 24 Javascript

mockjs+vue页面直接展示数据的方法

Dec 19 Javascript

vue使用websocket的方法实例分析

Jun 22 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

菜鸟修复电子管记

2021/03/02 无线电

php动态实现表格跨行跨列实现代码

2012/11/06 PHP

浅析ThinkPHP中execute和query方法的区别

2014/06/13 PHP

PHP提交表单失败后如何保留已经填写的信息

2014/06/20 PHP

thinkphp3.0输出重复两次的解决方法

2014/12/19 PHP

PHP XML和数组互相转换详解

2016/10/26 PHP

浅谈PHP表单提交(POST&GET&URL编/解码)

2017/04/03 PHP

php7安装mongoDB扩展的方法分析

2017/08/02 PHP

Yii1.1框架实现PHP极光推送消息通知功能

2018/09/06 PHP

JavaScript Cookie的读取和写入函数

2009/12/08 Javascript

jquery学习笔记用jquery实现无刷新登录

2011/08/08 Javascript

Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

2016/02/02 Javascript

微信小程序入门教程

2016/11/18 Javascript

Javascript中字符串和数字的操作方法整理

2017/01/22 Javascript

JS获取填报扩展单元格控件的值的解决办法

2017/07/14 Javascript

用jquery获取select标签中选中的option值及文本的示例

2018/01/25 jQuery

jquery层次选择器的介绍

2019/01/18 jQuery

小程序获取当前位置加搜索附近热门小区及商区的方法

2019/04/08 Javascript

layui固定下拉框的显示条数(有滚动条)的方法

2019/09/10 Javascript

JS实现简易留言板特效

2019/12/23 Javascript

在Python中封装GObject模块进行图形化程序编程的教程

2015/04/14 Python

简单实现python爬虫功能

2015/12/31 Python

Numpy数据类型转换astype,dtype的方法

2018/06/09 Python

python爬取基于m3u8协议的ts文件并合并

2019/04/26 Python

对Django中static(静态)文件详解以及{% static %}标签的使用方法

2019/07/28 Python

深入了解python中元类的相关知识

2019/08/29 Python

通过实例学习Python Excel操作

2020/01/06 Python

python实现udp聊天窗口

2020/03/31 Python

HQhair美国/加拿大：英国化妆品、美容及美发产品商城

2019/04/15 全球购物

美国校服网上商店：French Toast

2019/10/08 全球购物

Spotahome意大利：公寓和房间出租

2020/02/21 全球购物

美国踏板车和轻便摩托车销售网站：Mega Motor Madness

2020/02/26 全球购物

致跳高运动员广播稿

2014/01/13 职场文书

卫生标语大全

2014/06/21 职场文书

老龙头导游词

2015/02/11 职场文书

解决pytorch 损失函数中输入输出不匹配的问题

2021/06/05 Python