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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
浅谈关于vue中scss公用的解决方案
Dec 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
python中sleep函数用法实例分析
2015/04/29 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python中kmeans聚类实现代码
2018/02/23 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
城建学院毕业生自荐信
2014/01/31 职场文书
致400米运动员广播稿
2014/02/07 职场文书
铲车司机岗位职责
2014/03/15 职场文书
创意广告词
2014/03/17 职场文书
希特勒的演讲稿
2014/05/23 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2015年组织部工作总结
2015/04/03 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android