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

开发插件的两个方法jquery.fn.extend与jquery.extend

Nov 21 Javascript

js获取IP地址的方法小结

Jul 01 Javascript

wap图片滚动特效无css3元素纯js脚本编写

Aug 22 Javascript

jquery中toggle函数交替使用问题

Jun 22 Javascript

JavaScript基于自定义函数判断变量类型的实现方法

Nov 23 Javascript

vue2利用Bus.js如何实现非父子组件通信详解

Aug 25 Javascript

如何抽象一个Vue公共组件

Oct 17 Javascript

详解使用angular框架离线你的应用（pwa指南）

Jan 31 Javascript

利用JavaScript的Map提升性能的方法详解

Aug 14 Javascript

微信小程序实现定位及到指定位置导航的示例代码

Aug 20 Javascript

vue 内联样式style中的background用法说明

Aug 05 Javascript

javascript实现计算器功能详解流程

Nov 01 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中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题

2011/07/03 PHP

Destoon旺旺无法正常显示，点击提示“会员名不存在”的解决办法

2014/06/21 PHP

php精确的统计在线人数的方法

2015/10/21 PHP

PHP中文竖排转换实现方法

2015/10/23 PHP

Smarty日期时间操作方法示例

2016/11/15 PHP

PHP单例模式定义与使用实例详解

2017/02/06 PHP

Yii框架参数化查询中IN查询只能查询一个的解决方法

2017/05/20 PHP

js 字符串转化成数字的代码

2011/06/29 Javascript

Prototype源码浅析 String部分(三)之HTML字符串处理

2012/01/15 Javascript

window.onload追加函数使用示例

2014/03/03 Javascript

JavaScript中的Web worker多线程API研究

2014/12/06 Javascript

将json转换成struts参数的方法

2016/11/08 Javascript

node.js与C语言实现遍历文件夹下最大的文件，并输出路径，大小

2017/01/20 Javascript

NodeJS链接MySql数据库的操作方法

2017/06/27 NodeJs

关于使用axios的一些心得技巧分享

2017/07/02 Javascript

基于vue-resource jsonp跨域问题的解决方法

2018/02/03 Javascript

jQuery-ui插件sortable实现自由拖动排序

2018/12/01 jQuery

详细教你微信公众号正文页SVG交互开发技巧

2019/07/25 Javascript

一起写一个即插即用的Vue Loading插件实现

2019/10/31 Javascript

Nodejs + Websocket 指定发送及群聊的实现

2020/01/09 NodeJs

[01:56]无止竞再出发——中国军团出征2017年DOTA2国际邀请赛

2017/07/05 DOTA

Python爬取十篇新闻统计TF-IDF

2018/01/03 Python

Python中sort和sorted函数代码解析

2018/01/25 Python

解决python ogr shp字段写入中文乱码的问题

2018/12/31 Python

pytorch查看模型weight与grad方式

2020/06/24 Python

使用numpngw和matplotlib生成png动画的示例代码

2021/01/24 Python

CSS3教程(3):border-color网页边框色彩

2009/04/02 HTML / CSS

一款css实现的鼠标经过按钮的特效

2014/09/11 HTML / CSS

亚马逊中国官方网站：amazon.cn

2017/05/25 全球购物

L’urv官网：精品女性运动服品牌

2019/07/07 全球购物

请问如下代码执行后a和b的值分别是什么

2016/05/05 面试题

公务员年终个人总结

2015/02/12 职场文书

个人思想政治总结

2015/03/05 职场文书

2016寒假社会实践心得体会范文

2015/10/09 职场文书

教你如何用python开发一款数字推盘小游戏

2021/04/14 Python

自动在Windows中运行Python脚本并定时触发功能实现

2021/09/04 Python