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 ES6展开运算符的几个妙用，想了解ES6的同学，可以参考下2021-04-04
这篇文章主要为大家详细介绍了DOM2兼容处理顺序问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
JavaScript 中的 replace() 方法用于将字符串或其中的子字符串替换为指定字符，或替换一个与正则表达式匹配的子串，这篇文章主要介绍了JS 将字符串中指定字符全局替换,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了JavaScript缓冲运动实现方法,简单分析了JavaScript缓冲运动的实现原理与相关运算技巧,并给出了两则实例代码予以总结分析,需要的朋友可以参考下2016-01-01
今天小编就为大家分享一篇关于Javascript读写cookie的实例源码，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-03-03
Javascript 原型和继承(Prototypes and Inheritance)
前面我们看到了如何使用 constructor 来初始化对象。如果这样做，那么每一个创建的新对象都会对那些相同的属性，方法建立一个独立的副本。而实际上有更加有效的方法来指定方法，常量，以及其他一些可被所有该类的对象共享的属性。2009-04-04
本篇文章主要介绍了JS敏感词过滤实例，详细的介绍了两种方法，RegExp（），replace（），具有一定的参考价值，有兴趣的可以了解一下。2016-12-12
这篇文章主要介绍了如何实现鼠标滑过出现预览的大图提示效果,需要的朋友可以参考下2014-02-02
javascript parseInt() 函数的进制转换注意细节
parseInt(string, radix) 有2个参数，第一个string 是传入的数值，第二个radix是 传入数值的进制，参数radix 可以忽略，默认为 10，各种进制的数转换为 十进制整数,接下来详细介绍，感兴趣的朋友可以了解下哦2013-01-01
这篇文章主要介绍了JS中的form.submit()不能提交表单的错误原因,本文最后得出结论是按钮的ID、名称不要使用submit,需要的朋友可以参考下2014-10-10
最新评论