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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
浅谈JS的原型和继承
May 08 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
使用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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
Python实时获取cmd的输出
2015/12/13 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Linux下python制作名片示例
2018/07/20 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python数字类型math库原理解析
2020/03/02 Python
python实现控制台输出彩色字体
2020/04/05 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
人事行政主管岗位职责
2013/12/22 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
公司募捐倡议书
2014/05/14 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA