编程 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数组定义方法

Sep 10 Javascript

javascript和jquery实现设置和移除文本框默认值效果代码

Jan 13 Javascript

JS组件Bootstrap Select2使用方法详解

Apr 17 Javascript

使用JS代码实现点击按钮下载文件

Nov 12 Javascript

vue中路由验证和相应拦截的使用详解

Dec 13 Javascript

javascript 通过键名获取键盘的keyCode方法

Dec 31 Javascript

vue仿element实现分页器效果

Sep 13 Javascript

layui 根据后台数据动态创建下拉框并同时默认选中的实例

Sep 02 Javascript

html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】

Sep 10 jQuery

js实现网页随机验证码

Oct 19 Javascript

vant组件中 dialog的确认按钮的回调事件操作

Nov 04 Javascript

工作中常用js功能汇总

Nov 07 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中$this-&gt;含义分析

2009/11/29 PHP

解析PHP中的file_get_contents获取远程页面乱码的问题

2013/06/25 PHP

php向js函数传参的几种方法

2014/08/10 PHP

PHP filesize函数用法浅析

2019/02/15 PHP

phpinfo的知识点总结

2019/10/10 PHP

JS 学习笔记防止发生命名冲突

2009/07/30 Javascript

jQuery中get和post方法传值测试及注意事项

2014/08/08 Javascript

jQuery解析XML文件同时动态增加js文件的方法

2015/06/01 Javascript

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

2015/08/08 Javascript

javascript弹出窗口实现代码

2015/11/12 Javascript

jquery mobile界面数据刷新的实现方法

2016/05/28 Javascript

什么是JavaScript注入攻击?

2016/09/14 Javascript

vue数据双向绑定的注意点

2017/06/23 Javascript

js学习心得_一个简单的动画库封装tween.js

2017/07/14 Javascript

Angular 2.0+ 的数据绑定的实现示例

2017/08/09 Javascript

深入浅析JavaScript中的RegExp对象

2017/09/18 Javascript

JavaScript实现求最大公共子串的方法

2018/02/03 Javascript

vue中关闭eslint的方法分析

2018/08/04 Javascript

关于vue组件事件属性穿透详解

2019/10/28 Javascript

实例分析JS中的相等性判断===、 ==和Object.is()

2019/11/17 Javascript

nodejs实现百度舆情接口应用示例

2020/02/07 NodeJs

js实现验证码功能

2020/07/24 Javascript

vue 使用rules对表单字段进行校验的步骤

2020/12/25 Vue.js

详谈python read readline readlines的区别

2017/09/22 Python

python2和python3的输入和输出区别介绍

2018/11/20 Python

python3爬虫学习之数据存储txt的案例详解

2019/04/24 Python

解决Tensorflow占用GPU显存问题

2020/02/03 Python

Python多重继承之菱形继承的实例详解

2020/02/12 Python

Python连接Impala实现步骤解析

2020/08/04 Python

Python操作Word批量生成合同的实现示例

2020/08/28 Python

如何利用pycharm进行代码更新比较

2020/11/04 Python

Kneipp克奈圃美国官网：德国百年精油配方的传承

2018/02/07 全球购物

Agoda.com官方网站：便宜预订全球酒店，高达80%的折扣

2018/04/04 全球购物

肯尼迪就职演说稿

2013/12/31 职场文书

运动会入场解说词300字

2014/01/25 职场文书

工程安全生产协议书

2014/11/21 职场文书