js实现复选框的全选和取消全选效果
作者:roucheng 时间:2024-05-02 17:40:02
在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下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
标签:js,复选框,全选,取消全选
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python爬虫网页元素定位术
2023-07-25 16:28:00
![](https://img.aspxhome.com/file/2023/3/76113_0s.webp)
你是真正的用户体验设计者吗? Ⅴ
2008-04-19 18:32:00
![](https://img.aspxhome.com/file/UploadPic/20084/19/2008419215352323s.jpg)
Pycharm最常用的快捷键及使用技巧
2022-12-13 11:33:25
![](https://img.aspxhome.com/file/2023/6/75116_0s.png)
Python单元测试_使用装饰器实现测试跳过和预期故障的方法
2022-07-27 17:53:44
Python OpenCV对本地视频文件进行分帧保存的实例
2021-09-15 23:03:18
微信js-sdk 录音功能的示例代码
2024-04-22 13:04:45
![](https://img.aspxhome.com/file/2023/0/135890_0s.jpg)
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2023-03-07 13:46:07
Oracle 查询表信息获取表字段及字段注释
2024-01-14 14:46:36
无法远程登入MySQL数据库的几种解决办法
2012-04-13 11:57:41
如何使用python爬虫爬取要登陆的网站
2022-09-07 08:04:46
![](https://img.aspxhome.com/file/2023/6/105066_0s.jpg)
asp程序运行速度测试
2008-02-11 19:11:00
原生js编写贪吃蛇小游戏
2023-07-02 05:19:17
django实现登录时候输入密码错误5次锁定用户十分钟
2023-04-17 14:48:57
![](https://img.aspxhome.com/file/2023/6/125006_0s.png)
PHP实现生成二维码的示例代码
2023-06-13 09:16:03
pytorch中的squeeze函数、cat函数使用
2022-03-27 14:32:24
有时间先后的翻页
2008-05-23 13:14:00
![](https://img.aspxhome.com/file/UploadPic/20085/23/2008523131914487s.gif)
MySQL中truncate误操作后的数据恢复案例
2024-01-12 20:45:56
利用types增强vscode中js代码提示功能详解
2023-07-15 05:57:08
![](https://img.aspxhome.com/file/2023/1/55981_0s.png)
js获取select标签选中值的两种方式
2024-04-19 09:50:18
企业生产MySQL优化介绍
2024-01-21 10:13:53