javascript总结41:表格全选反选,经典案例详解
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .wrap {
width: 300px;
margin: 100px auto 0;
} table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head> <body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr> </tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div> <script>
// 整个全选,反选案例,可以分为三个需求
// 1. 全选点击时的逻辑
// 1.1 获取元素
var j_cbAll = document.getElementById('j_cbAll');
var tb = document.getElementById('j_tb');
var cbs = tb.getElementsByTagName('input');
// console.log(cbs);
// 1.2 给全选复选框注册点击事件
j_cbAll.onclick = function(){
// 1.3 在事件处理函数中, 让下面的都选中,获取都不选中
for(var i = 0; i < cbs.length; i++) {
cbs[i].checked = j_cbAll.checked;
}
} // 2. 下面的单个的复选框点击时的逻辑
//2.1 给每一个单个复选框注册点击事件
for(var i = 0; i < cbs.length; i++) {
cbs[i].onclick = cbClick;
}
//当点击单个复选框时,要触发的函数
function cbClick(){
//2.2.1 判断所有的单个复选框是否都选中了
var flag = true;
for(var i = 0; i < cbs.length; i++) {
if(!cbs[i].checked) {
// //证明有未选中的
flag = false;
break; //如果已经查到有未选中的了,就没有必须要在往下查看了
} }
//2.2.2 根据之前判断的结果,给全选框赋值
j_cbAll.checked = flag; } // 3. 反选点击时的逻辑
// 3.1 给反选按钮注册事件
document.getElementById('btn').onclick = function(){
// 3.2 事件处理函数中,让单个复选框取反
for(var i = 0; i < cbs.length; i++) {
cbs[i].checked = !cbs[i].checked; }
// 3.3 取反之后,判断每一个单个的复选框是否都选中
cbClick(); }
</script>
</body> </html>
<!DOCTYPE html><html>
<head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style></head>
<body><div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> <input type="button" value=" 反 选 " id="btn"></div>
<script> // 整个全选,反选案例,可以分为三个需求// 1. 全选点击时的逻辑 // 描述: 全选选中时,下面所有的都选中,否则,都不选中// 1.1 获取元素 var j_cbAll = document.getElementById('j_cbAll'); var tb = document.getElementById('j_tb'); var cbs = tb.getElementsByTagName('input');// console.log(cbs);// 1.2 给全选复选框注册点击事件 j_cbAll.onclick = function(){ // 1.3 在事件处理函数中, 让下面的都选中,获取都不选中// 如何判断全选有没有被选中?// console.log(j_cbAll.checked); // if(j_cbAll.checked){// //说明全选选中了,那么下面的都选中////// cbs[0].checked = true;//// cbs[1].checked = true;//// cbs[2].checked = true;//// cbs[3].checked = true;// for(var i = 0; i < cbs.length; i++) {// cbs[i].checked = true;// }//// }else{// //说明全选没选中,那么下面的都不选中// for(var i = 0; i < cbs.length; i++) {// cbs[i].checked = false ;// }// } //优化后: for(var i = 0; i < cbs.length; i++) { cbs[i].checked = j_cbAll.checked; } } // 2. 下面的单个的复选框点击时的逻辑 // 我们应该在每一个单个复选框点击的时候,都去判断一下,其他的单个的复选框是否都被选中了 //2.1 给每一个单个复选框注册点击事件 for(var i = 0; i < cbs.length; i++) { cbs[i].onclick = cbClick; //为了节省内存,将函数申明放到for循环外面 } //当点击单个复选框时,要触发的函数 function cbClick(){ // 2.2 在事件处理函数中,判断每一个是否都选中,如果都选中,则全选也选中,否则,全选不选中 //2.2.1 判断所有的单个复选框是否都选中了 var flag = true; //用于判断是否都选中,假设都选中的状态 for(var i = 0; i < cbs.length; i++) {// if(cbs[i].checked == false) {// //证明有未选中的// flag = false;// } if(!cbs[i].checked) {// //证明有未选中的 flag = false; break; //如果已经查到有未选中的了,就没有必须要在往下查看了 } } //2.2.2 根据之前判断的结果,给全选框赋值// if(flag == true){// j_cbAll.checked = true;// }else{// j_cbAll.checked = false;// } j_cbAll.checked = flag; } // 3. 反选点击时的逻辑 // 点击反选按钮,让单个的复选框取反, 之后, 判断是不是全部都选中了,如果都选中则,全选按钮也要选中,否则,全选按钮不选中// 3.1 给反选按钮注册事件 document.getElementById('btn').onclick = function(){ // 3.2 事件处理函数中,让单个复选框取反 for(var i = 0; i < cbs.length; i++) { cbs[i].checked = !cbs[i].checked; }// 3.3 取反之后,判断每一个单个的复选框是否都选中 cbClick(); }
</script></body>
</html>
javascript总结41:表格全选反选,经典案例详解的更多相关文章
- Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- 用JavaScript实现全选-反选
实现全选-反选 在日常生活我们会遇到需要全选-反选的地方,其实用JavaScript也能实现. 样式如下所示: 样式代码如下所示: <!DOCTYPE html PUBLIC "-// ...
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- JavaScript自动计算价格和全选
JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...
随机推荐
- 《Hadoop技术内幕》读书笔记——Task运行过程分析
本文是董西成的Hadoop技术内幕一书的读书章节总结. 第八章 Task运行过程分析 所有Task需要周期性地向TaskTracker汇报最新进度和计数器值,而这正是由Reporter组件实现的,其中 ...
- sqlldr加载 数据文件的字段超出最大长度
SQLLOAD数据的时候,建表给的字段给够了,建表已经给到VHARCHAR2(1024)了,实际数据是VHARCHAR2(256).加载报错"数据文件的字段超出最大长度"查了半天, ...
- 仅用CSS3创建h5预加载旋转圈
<head> <meta charset="UTF-8"> <title></title> <style type=" ...
- 表格字段常用注解@NotBlank @NotEmpty @NotNul @Pattern
在Hibernate Validator(org.hibernate.validator.constraints)中: @NotEmpty://CharSequence, Collection, Ma ...
- Tkinter PanedWindow
Tkinter PanedWindow: 一个PanedWindow是一个容器部件可能包含任何数量的窗格,水平或垂直排列 一个PanedWindow是一个容器部件可能包含任何数量的窗格,水平 ...
- Swift 动画片段
UIView.transitionWithView( self.WeatherDetailsView, duration: 0.7, options: .TransitionCrossDissolve ...
- C#接口的三种实现方式
转自原文C#接口的三种实现方式 public interface MyInterface { /// 下面三个方法的签名都是 /// .method public hidebysig newslot ...
- Android MVP模式简单易懂的介绍方式 (二)
Android MVP模式简单易懂的介绍方式 (一) Android MVP模式简单易懂的介绍方式 (二) Android MVP模式简单易懂的介绍方式 (三) 上一篇文章我们介绍完了Model的创建 ...
- WPF DataGrid 控件的运用
WPF DataGrid 控件的运用 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-23 参考: King Cobra 博客 ...
- 怎样获取datagrid中编辑列combobox的value值与text值
var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'}); var productname = $(ed ...