案例全选和全不选的实现
时间:2019-09-09
本文章向大家介绍案例全选和全不选的实现,主要包括案例全选和全不选的实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html> <html> <head> <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>红烧肉</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>西红柿鸡蛋</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>油炸榴莲</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>清蒸助教</td> <td>田老师</td> </tr> </tbody> </table> </div> <script src="common.js"></script> <script> //获取全选复选框 var th = my$("j_cbAll"); //获取单选的复选框 var tb = my$("j_tb").getElementsByTagName("input"); //为全选复选框添加点击事件 th.onclick = function() { //对单选的复选框进行遍历 for (var i = 0; i < tb.length; i++) { //每个单选框的状态跟复选框的一样————实现全选和全部不选 tb[i].checked = this.checked; } }; //为单选框添加点击事件 //对每一个单选框添加点击事件 for (var j = 0; j < tb.length; j++) { //添加点击事件 tb[j].onclick = function() { //默认都被选中了 var flag = true; //判断是不是全选 for (k = 0; k < tb.length; k++) { if (!tb[k].checked) { //没选中就进来了 flag = false; break; } } //全选的这个复选框的状态就是flag这个变量的值 th.checked = flag; }; } </script> </body> </html>
效果:
原文地址:https://www.cnblogs.com/zhangDY/p/11494651.html
- 2018程序员必备碎片化学习工具
- 深入理解php底层:php生命周期
- 网站性能测试指标详解
- 在.NET Core类库中使用EF Core迁移数据库到SQL Server
- 人类的未来:儿童都能驾驶的汽车
- 论循证新闻的方法与意义——一种媒体融合背景下新闻生产方式创新
- 域名资讯:域名jiuhuang.com已搭建成“韭黄答题助手”网站
- Servlet开篇
- 浅谈中国域名的名与利
- 加密货币的火爆,tokens.com域名已50万美元成交
- 家具平台谷居完成2000万元融资,启用长尾双拼域名
- 如果未来的 AI 拥有意识,你舍得不理它吗?
- 微信这家人脸智慧时尚店可以“刷脸”试衣、付款
- 北京允许无人驾驶路测 难道是为方便圣诞老人送礼?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 网络拓扑图基础入门
- 【网络技术联盟站】centos7.6环境下redis5.0.8集群搭建文档
- WAF原理及其使用说明
- 还在写Bug?GitHub官方代码扫描工具上线,免费查找漏洞
- n1.Docker安装运行所遇异常解决
- n3.Docker之Win10和Server使用实例
- GitHub 再见 Master !
- IT运维面试问题总结-Linux基础
- 6.Docker使用辅助工具汇总
- IT运维面试问题总结-基础服务、磁盘管理、虚拟平台和系统管理
- IT运维面试问题总结-运维工具、开源应用(Ansible、Ceph、Docker、Apache、Nginx等)
- IT运维面试问题总结-数据库、监控、网络管理(NoSQL、MongoDB、MySQL、Prometheus、Zabbix)
- IT运维面试问题总结-LVS、Keepalived、HAProxy、Kubernetes、OpenShift等
- GitHub 标星 119K+!这些神器仅需一行代码即可下载全网视频!
- React进阶(2)-上手实践Redux-如何获取store的数据