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 相关文章推荐
jQuery示例收集
Nov 05 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python3中exp()函数用法分析
2019/02/19 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
NULL是什么,它是怎么定义的
2015/05/09 面试题
团日活动总结报告
2014/06/25 职场文书
导航工程专业自荐信
2014/09/02 职场文书
惊涛骇浪观后感
2015/06/05 职场文书