js实现复选框的全选和取消全选效果


Posted in Javascript onJanuary 03, 2017

在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下:

以下是代码:

<html>
<head>
 <meta charset=" utf-8">
 <meta name="author" content="http://hovertree.com/" />
 <title>JS实现复选框的全选和取消全选 - 何问起</title><base target="_blank" />
 <style type="text/css">
  li {
   list-style-type: none;
   font-size: 12px;
   color: blue;
   width: 300px;
   height: 20px;
   line-height: 20px;
  }
  a {
   width: 200px;
   height: 20px;
   float: left;
  }
  .ck {
   float: left;
   width: 26px;
  }
  .time {
   color: red;
   width: 60px;
   height: 20px;
   float: right;
  }
  .dohovertree {
   font-size: 12px;
  }
 </style>
 <script type="text/javascript">
window.onload=function()
{
 var checkboxs=document.getElementsByName("myHove"+"rTreechk");
 var hvtck=document.getElementById("hvtck");
 cklen=checkboxs.length;
 hvtck.onclick=function()
 {
 if(this.checked==true)
 {
  for(var i=0;i<cklen;i++)
  {
  checkboxs[i].checked=true;
  }
  document.getElementById("dohovert"+"ree").innerHTML="取消"
 }
 else
 {
  for(var i=0;i<cklen;i++)
  {
  checkboxs[i].checked=false;
  }
  document.getElementById("dohovertree").innerHTML="全选"
 }
 }
}
 </script>
</head>
<body>
 <h3>JS实现复选框的全选和取消全选 何问起</h3>
 <div style="width:736px">
  <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/91eqf5ge.htm">原文</a>
 </div>
 <div>
  <ul>
   <li>
    <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
    <a href="http://hovertree.com/">何问起欢迎您</a>
    <span class="time">2014-12-13</span>
   </li>
   <li>
    <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
    <a href="http://hovertree.com/hvtart/bjae/91eqf5ge.htm">大家好,好久不见了</a>
    <span class="time">2015-12-03</span>
   </li>
   <li>
    <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
    <a href="http://hovertree.com/menu/javascript/">何问起JS</a>
    <span class="time">2015-11-13</span>
   </li>
  </ul>
  <div>
   <input type="checkbox" id="hvtck" />
   <span class="dohovertree" id="dohovertree">全选</span>
  </div>
 </div>
</body>
</html>

以上代码实现了复选框的全选与不全选效果,下面就简单介绍一下如何实现此功能。

一、通过下面两个语句分别获取要选取的复选框对象集合和要点击的复选框对象:

var checkboxs=document.getElementsByName("myHove"+"rTreechk");
var hvtck=document.getElementById("hvtck");

通过以下语句获取要选取复选框的数量:

cklen=checkboxs.length;

二、为myck对象绑定onclick事件处理函数。事件处理函数事先判断hvtck对象是否被选中,如果被选中的话,则遍历复选框,挨个取消选中状态,并且通过document.getElementById("dohovertree").innerHTML="取消"将dohovertree元素中的文本设置为取消,else语句中的原理是一样的,这里就不重复介绍了。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
HTML上传控件取消选择
Mar 06 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 #Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 #Javascript
原生JS实现在线问卷调查投票特效
Jan 03 #Javascript
详解angular中如何监控dom渲染完毕
Jan 03 #Javascript
Node.js学习入门
Jan 03 #Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 #Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 #Javascript
You might like
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JAVASCRIPT HashTable
2007/01/22 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
公司培训欢迎词
2014/01/10 职场文书
护理工作感言
2014/01/16 职场文书
初级会计求职信范文
2014/02/15 职场文书
运动会加油稿100字
2014/09/19 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
感谢信怎么写
2015/01/21 职场文书
2015年远程教育工作总结
2015/05/20 职场文书