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>
运行结果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javaScript checkbox 全选/反选及批量删除
前台代码 复制代码 代码如下: <script type="text/javascript"> var a; function CheckAll(){ if(a==1) { for(var i=0;i<window.document.form1.elements.length;i++) { var e = form1.elements[i]; e.checked =false; } a=0; } else { for(var i=0;i<window.docum
-
AngularJS实现全选反选功能
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en&quo
-
javaScript实现复选框全选反选事件详解
本文实例为大家分享了javaScript实现复选框全选反选的具体代码,供大家参考,具体内容如下 代码 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title
-
js实现checkbox全选和反选示例
复选框全选示例 复制代码 代码如下: <input type="checkbox" name="selectall" value=on onclick="selectAll()"> function selectAll(form) { var obj = document.getElementsByName('selectall'); var cks = document.getElementsByTagName("inpu
-
js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 <html> <head> <title>html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content=&quo
-
js操作CheckBoxList实现全选/反选(在客服端完成)
对于CheckBoxList控件来说,一方面要实现大量数据在服务器端的绑定工作,另一方面往往要求实现全选.反选等功能.虽然可以在服务器端完成这方面的工作,但这样一个简单的工作似乎更应该在客户端完成. 具体方法: 在页面中放入一个CheckBoxList控件,并添加几项,用来分析其产生的HTML代码,这样在使用js进行 动态控制时,将会非常清晰其测试代码如下所示: 复制代码 代码如下: <asp:CheckBoxListID="CheckBoxList1"runat="s
-
利用Vue.js实现checkbox的全选反选效果
前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'
-
javascript实现简单的全选和反选功能
本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="butt
-
兼容ie和firefox版本的js反选 全选 多选框
朋友们说不兼容.昨天晚上回去调试了一个兼容版本: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <script language="javascript"> function selectIt(action){ var testform=document.g
-
js实现checkbox全选、不选与反选的方法
本文实例讲述了js实现checkbox全选.不选与反选的方法.分享给大家供大家参考.具体分析如下: 一.思路: 1. 获取元素 2. 给全选 不选 反选添加点击事件 3. 用for循环checkbox 4. 把checkbox的checked设置为true即实现全选 5. 把checkbox的checked设置为false即实现不选 6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设