js实现复选框的全选和取消全选效果
作者:roucheng 发布时间:2024-05-02 17:40:02
标签:js,复选框,全选,取消全选
在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下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语句中的原理是一样的,这里就不重复介绍了。
来源:http://www.cnblogs.com/roucheng/p/jscheck.html
0
投稿
猜你喜欢
- 目录[redis 调用Lua脚本](#redis 调用Lua脚本)[redis+lua 实现评分排行榜实时更新](#redis+lua 实现
- 条件:2台服务器:A和B,需要A服务器上的表迁移到B服务器。Innodb表:sysUser,记录数:351781。以下测试在MySQL 5.
- 一、前言今天要介绍的 click 则是用一种你很熟知的方式来玩转命令行。命令行程序本质上是定义参数和处理参数,而处理参数的逻辑一定是与所定义
- 本文实例讲述了基于scrapy实现的简单蜘蛛采集程序。分享给大家供大家参考。具体如下:# Standard Python library i
- 利用requests、BeautifulSoup、xlwings库抓取中国银行外汇牌价首页数据1. 利用requests、Beautiful
- 安装方法: regsvr32 parmf.dll附 如果想取消注册可以:regsvr32 /u&nb
- ESLint简介关于ESLint的介绍网上很多,这里就简单说些有用的。 ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的
- 前言Tkinter 是 Python 的标准 GUI 库。Python 使用 Tkinter 可以快速的创建 GUI 应用程序。由于 Tki
- 数据可视化动画还在用 Excel 做?今天分享一个简单的 Python 包就能分分钟搞定!而且生成的动画也足够丝滑,效果是酱紫的:这是一位专
- 一,通用的ASCII码对照表 图解ASCII码对照表图,以字符A为例Dec表示十进制,如65Hx表示十六进制,如41Oct表示八进制,如10
- 快速高效用:SET SQL_SAFE_UPDATES = 0;下面的就不要看了!今日用MySQL Workbench进行数据库的管理更新时,
- 之前的表单验证都是用js写的,这里也可以使用tp框架的验证。但是两者比较而言还是js验证比较好,因为tp框架验证会运行后台代码,这样运行速度
- 本文为大家分享了Java基于MySQL实现学生管理系统,供大家参考,具体内容如下因为实验室要交作业然后就做了一个学生管理系统,贴个代码纪念一
- 引言安装或者更新完pytorch后,运行不了,显示错误:(base) xu@xusu:~$ pythonPython 3.7.1 (defa
- 本文实例讲述了Python 面向对象静态方法、类方法、属性方法知识点。分享给大家供大家参考,具体如下:(1)静态方法--》-@staticm
- 1. 引言本文是数独游戏问题求解的第二篇,在前文中我们使用回溯算法实现了最简单版本的数独游戏求解方案。本文主要在前文解决方案的基础上,来思考
- 前言在字典中查找某一个值的时候,若key不存在就会返回一个keyerror错误而不是一个默认值,如果想要返回一个默认值可以使用default
- 每个程序员都绝对必须知道的关于字符集和Unicode的那点儿事(别找借口!)Unicode与字符集你曾经是否觉得HTML中的"Co
- Anaconda是一个和Canopy类似的科学计算环境,但用起来更加方便。自带的包管理器conda也很强大。首先是下载安装。Anaconda
- 前言说到面向对象,大家都不陌生。关系型数据库也是后端日常用来存储数据的,但数据库是关系型的,因此,ORM通过对象模型和数据库的关系模型之间建