18-7-全选
时间:2019-09-07
本文章向大家介绍18-7-全选,主要包括18-7-全选使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-family: "Microsoft YaHei", serif; } body, dl, dd, p, h1, h2, h3, h4, h5, h6 { margin: 0; } ol, ul, li { margin: 0; padding: 0; list-style: none; } img { border: none } #wrap{ cursor: pointer; } </style> </head> <body> <div id="wrap"> <div> <input type="checkbox" id="box1"><label for="box1">11</label> <input type="checkbox" id="box2"><label for="box2">22</label> <input type="checkbox" id="box3"><label for="box3">33</label> <input type="checkbox" id="box4"><label for="box4">44</label> <input type="checkbox" id="box5"><label for="box5">55</label> <input type="checkbox" id="box6"><label for="box6">66</label> </div> <input type="checkbox" id="box7"><label for="box7">全选</label> </div> <script> // 在原生表单中元素input的里边,checked和disabled在js里边是以布尔值的形式体现的 let aInp = document.querySelectorAll("#wrap div input"); let oBtn = document.getElementById("box7"); let len = aInp.length; let num = 0; // console.log(aInp[0].disabled); false // console.log(aInp[0].checked); false 选中就是true // aInp[3].checked = "aaa"; 这样也是可以被选中的,只要后边是个真值就会被翻译为true赋予给他 oBtn.onchange = function () { if (this.checked) { for (let i=0;i<len;i++) { aInp[i].checked = true; } }else{ for (let i=0;i<len;i++) { aInp[i].checked = false; } } }; for (let i=0;i<len;i++) { aInp[i].onchange = function () { if (this.checked){ num++; } else{ num--; } oBtn.checked = num===len; } } </script> </body> </html>
原文地址:https://www.cnblogs.com/zhangyu666/p/11479992.html
- 使用 github 做代码管理,知道这些就够了
- 二叉树就这么简单
- Elasticsearch就是这么简单
- 让 MyBatis Generator 变的更简单
- SpringMVC【参数绑定、数据回显、文件上传】
- SDNLAB技术分享(五):浅谈Open vSwitch移植
- SpringMVC【校验器、统一处理异常、RESTful、拦截器】
- OpenStack与SDN控制器的集成
- 使用机器学习算法对流量分类的尝试——基于样本分类
- 曾经做过的40道程序设计课后习题总结(一)
- 基于ODL与Pica8交换机端到端的限速实验
- SpringBoot就是这么简单
- SpringData JPA就是这么简单
- Openflow细节理解之—Buffer_id篇
- 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 数组属性和方法
- Linux系统下快速配置HugePages的完整步骤
- Laravel5.1 框架关联模型之后操作实例分析
- PHP实现的多进程控制demo示例
- 你可能不知道的一些linux文件权限管理办法
- Laravel框架路由与MVC实例详解
- python实现学生管理系统开发
- 使用 chkconfig 和 systemctl 命令启用或禁用 Linux 服务的办法
- PHP defined()函数的使用图文详解
- 详解在Linux中清空或删除大文件内容的5种办法
- php和redis实现秒杀活动的流程
- CentOS 7中搭建NFS文件共享存储服务的完整步骤
- PHP检测一个数组有没有定义的方法步骤
- Yii2.0框架模型多表关联查询示例
- Yii2.0框架模型添加/修改/删除数据操作示例
- thinkphp5.1框架容器与依赖注入实例分析