js实现复选框全选
HTML代码如下:
<div>
<label><input type="checkbox" name="aAll">全选</label><br>
<label><input type="checkbox" name="a">A</label><br>
<label><input type="checkbox" name="a">B</label><br>
<label><input type="checkbox" name="a">C</label>
</div>
JS代码如下:
var all = document.getElementsByName("aAll")[0];
var aCheck = document.getElementsByName("a");
all.onclick = function(){
if(this.checked){
for(var i of aCheck){
i.checked = true;
}
}else{
for(var i of aCheck){
i.checked = false;
}
}
}
for(var i of aCheck){
i.onclick = function(){
if(!this.checked){
all.checked = false;
}
}
}
逻辑很简单,有兴趣的可以复制到页面试试。
js实现复选框全选的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- Android Studio如何减小APK体积
最近在用AndroidStudio开发一个小计算器,代码加起来还不到200行.但是遇到一个问题,导出的APK文件大小竟然达到了1034K.这不科学,于是就自己动手精简APK.下面我们大家一起学习怎么缩 ...
- supermap布局设定地图网格及布局网格
地图网格设定 LayoutElements elements = m_mapLayoutControl.MapLayout.Elements; //构造GeoMap GeoMap geoMap = n ...
- 连接池的实现 redis例子
# -*- encoding:utf-8 -*- # import pymysql # # conn = pymysql.connect(host="127.0.0.1", por ...
- 如何查看编译安装的lnmp环境各自的配置参数
安装好后如何查看mysql/apache/nginx/php安装参数 查看mysql编译参数: cat /usr/local/mysql/bin/mysqlbug | grep CONFIGURE ...
- FFmpeg-for IOS 一[安装]
FFmpeg编译环境搭建 准备 下载 gas-preprocessor 下载 ffmpeg包,ffmpeg 安装yasm,先安装homebrew,输入:ruby -e "$(curl -fs ...
- asp.net mvc使用log4gNetz
1. 下载安装log4gNet 2. 将 \bin\net\4.0\release\log4net.dll 复制到你的项目中 . 3. 将log4net.dll 添加引用到你的项目中. 4. 添加如下 ...
- apache 配置rewrite模块,URL中隐藏index.php
打开httpd.conf 去掉下面的井号 #LoadModule rewrite_module modules/mod_rewrite.so把前面的警号去掉 在网站根目录添加.htaccess Rew ...
- Delphi XE7中各种字符串与字符类型的内存结构
1. ShortString 类型 定义:type ShortString = string[255]; 内存结构与大小:ShortString 是每个字符为单字节的字符串.ShortString 的 ...
- Windows10下的JDK环境配置。
首先附上JDK资源: 下载地址:Java SE Development Kit 8u112 PS:32位系统下载X86,64位系统下载X64 JDK安装: 此处省略安装步骤..... PS:记住JDK ...
- EXCEL 2010学习笔记 —— 数据透视表
今天整理一下EXCEL2010 数据透视表的课程笔记,数据透视表可以对多组数据进行统计和整理,是一种基本的数据可视化工具. 记录6个方面的总结: 1.创建数据透视表 2.更改数据透视表的汇总方式 3. ...