JavaScript实现全选或反选功能
更新时间：2021年08月20日 10:02:11 作者：小方同学-方鹏远
这篇文章主要为大家详细介绍了JavaScript实现全选或反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现全选或反选功能的具体代码，供大家参考，具体内容如下
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例--表格全选</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
}
td, th {
text-align: center;
border: 1px solid;
}
.out {
background-color: white;
}
.over {
background-color: pink;
}
div{
margin-top: 10px;
text-align: center;
}
</style>
<script>
window.onload = function () {
//全选
document.getElementById("checkAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = true;
}
}
//全不选
document.getElementById("unCheckAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
}
//反选
document.getElementById("reCheck").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = !cbs[i].checked;
}
}
//鼠标经过，颜色变化
var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = "over";
}
trs[i].onmouseout = function () {
this.className = "out";
}
}
//选中顶部复选框，全选
document.getElementById("firstCb").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = this.checked;
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<td><input type="checkbox" name="cb" id="firstCb"></td>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
</table>
<div>
<input type="button" value="全选" id="checkAll">
<input type="button" value="全不选" id="unCheckAll">
<input type="button" value="反选" id="reCheck">
</div>
</body>
</html>
运行结果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS仿QQ好友列表展开、收缩功能(第一篇),需要的朋友可以参考下2017-07-07
这篇文章主要介绍了JS使用百度地图API自动获取地址和经纬度操作,结合实例形式分析了javascript与百度地图API接口交互实现获取地址与经纬度相关操作技巧,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了JavaScript引用类型Function,结合实例形式详细分析了javascript引用类型Function概念、定义、原理、相关使用技巧与操作注意事项,需要的朋友可以参考下2018-08-08
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
下面小编就为大家带来一篇JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了js数组中去除重复值的几种方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-08-08
一些js代码，自己备用的,高手不要笑话我。（跨浏览器基础事件，浏览器检测，判断浏览器的名称、版本号、操作系统）等等，很实用的，方便自己使用，感兴趣的朋友可以了解下，希望本文对你有所帮助2013-01-01
js利用FileReader实现图片转base64格式并上传预览头像
本文主要介绍了js利用FileReader实现图片转base64格式并上传预览头像，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家详细介绍了JS实现元素上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
impress.js是一款新兴的幻灯工具，它的效果类似Prezi，但是拥有3D的功能，而且是在MIT&GPL协议下开源，对于有一定的Web开发基础的人而言，真是一个福音，只需要简单的用些html指令，并加载impress.js就可以制作出一个缩放式幻灯，朋友们感兴趣吧，快来一起学习吧。2015-09-09
这篇文章主要介绍了JavaScript使用原型和原型链实现对象继承的方法,简单讲述了javascript原型与原型链的原理,并结合实例形式详细分析了javascript中对象继承的常见实现技巧,需要的朋友可以参考下2017-04-04
最新评论