JavaScript实现表格全选、全不选、反选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格全选</title><style>div{text-align: center;margin: 50px;/*外边距值50px*/}table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}.out{background-color: white;}.over{background-color: gold;}</style><script>/*分析：1、全选获取所有的checkbox遍历cb，设置每一个cb的状态为选中 checked*///1、在页面加载完成之后绑定事件window.onload = function () {//2、给全选按钮绑定单击事件document.getElementById("selectAll").onclick = function () {//全选//1、获取所有的checkboxvar cbs = document.getElementsByName("cb");//2、遍历for (var i = 0;i<cbs.length;i++) {//3、设置每一个cb的状态为checkedcbs[i].checked = true;}}document.getElementById("unselectAll").onclick = function () {//全不选//1、获取所有的checkboxvar cbs = document.getElementsByName("cb");//2、遍历for (var i = 0;i<cbs.length;i++) {//3、设置每一个cb的状态不选cbs[i].checked = false;}}document.getElementById("selectRev").onclick = function () {//反选//1、获取所有的checkboxvar cbs = document.getElementsByName("cb");//2、遍历for (var i = 0;i<cbs.length;i++) {//3、设置每一个cb的状态为相反状态if(cbs[i].checked == true)cbs[i].checked = false;elsecbs[i].checked = true;}}document.getElementById("firstcb").onclick = function () {//全不选//1、获取所有的checkboxvar cbs = document.getElementsByName("cb");//获取第一个cb//2、遍历for (var i = 0;i<cbs.length;i++) {//3、设置每一个cb的状态不选//cbs[i].checked = cbs[0].checked;cbs[i].checked = this.checked;}}//给所有tr绑定鼠标移到元素之上和移出元素之上事件var trs = document.getElementsByTagName("tr");//2、遍历for (var i = 0;i<trs.length;i++){//移到元素之上trs[i].onmouseover = function () {this.className = "over";}//移出元素trs[i].onmouseout = function () {this.className = "out";}} }</script></head>
<body>
<table><caption>学生信息表</caption><tr><td><input type="checkbox" id="firstcb" name="cb"></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><tr><td><input type="checkbox" name="cb"></td><td>4</td><td>唐莲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr>
</table>
<div><input type="button" id="selectAll" value="全选"><input type="button" id="unselectAll" value="全不选"><input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

JavaScript实现表格全选、全不选、反选相关推荐

jQuery全选全删动态表格
jQuery全选全删动态表格 1.效果图附上: 2.代码呈上: <!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
【javascript】checkbox——类似邮箱全选功能
现在很多邮箱都有全选的功能,我也做了个练练手. <!DOCTYPE HTML> <html lang="en-US"> <head><me ...
html bootstrap复选框全选,javascript+bootstrap+html实现层级多选框全层全选和多选功能代码实例...
想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里,接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能,需要的 ...
VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 效果:如红框中部分. 一选全选:表头上的单选框选中则下面每行都选中. 全选一选:表中数据每行都 ...
JavaScript实现复选框的全选/全不选和批量选择
实现数据的批量选择以及全选/全部选功能的效果如下所示: 代码如下: <a class="btn btn-default" id="search_like" ...
jQuery/javascript实现全选全不选
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习< ...
JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。
一.Javacript设置全选的方法:首先创建一个HTML示例文件:然后添加script标签并创建js代码:最后通过循环遍历每个checkbox对象,将其checked属性设置为true实现全选功能即 ...
jquery实现动态表格项目（表格增加删除/全选/表格变色特效等功能）（附源码+javaWEB开发如果需要可以直接使用）
jquery实现动态表格项目(表格增加删除/全选/表格变色特效)
php全选和反选,纯javascript实现选择框的全选与反选功能
HTML部分选择全部一键上路 js部分 var oinput = document.getElementById('all'); // var oinput_s = document.getEle ...
vue 带全选和多选的表格怎么写_vue实现下拉列表多选全选以及模糊查询的vue组件...
vue实现下拉列表多选全选以及模糊查询的vue组件发布时间:2018-09-12 17:41, 浏览次数:3776 , 标签: vue <>前端,有时有这样的需求,需要一个下拉列表,还要 ...

JavaScript实现表格全选、全不选、反选

JavaScript实现表格全选、全不选、反选相关推荐

最新文章

热门文章