原生js的联动全选
开发应用中有很多工具可以使用，下面介绍一个原生js写的联动全选思路！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>联动全选</title>
</head>
<script>
window.onload = function(){
// 在input外部添加一个box, 作用：为了更加精准的获取到要操作的input标签
var oBox = document.getElementById('box');
var aInput = oBox.getElementsByTagName('input');
var oBtn = document.getElementById('btn');
// 点击全选按钮的操作
oBtn.onclick = function(){
if(this.checked == true){ // 如果当前按钮使选中的状态，就让下面所有的选中
for(var i=0;i<aInput.length;i++){
aInput[i].checked = true;
}
}else{
for(var i=0;i<aInput.length;i++){
aInput[i].checked = false;
}
}
}
// 给每一个子集按钮都加上点击事件
for(var i=0;i<aInput.length;i++){
aInput[i].onclick = function(){
var n = 0;
for(var i=0;i<aInput.length;i++){
if(aInput[i].checked == true){
n++;
}
}
// document.title = n;
if(n == aInput.length){
oBtn.checked = true;
}else{
oBtn.checked = false;
}
}
}
}
</script>
<body>
<input type="checkbox" id="btn"/>全选
<br />
<br />
<div id="box">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" />
</div>
</body>
</html>
原生js的联动全选的更多相关文章
- 原生JS实现购物车全选多选按钮功能
对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...
- 原生js中实现全选和反选功能
<!DOCTYPE html> <html> <head lang="en"> <meta char ...
- Angular-ngtable联动全选
之前于Angular第三方插件ngTable的官网demo上看到的例子,但苦于demo中联动全选为选中所有,项目中并不适用,因此做了下小小的修改,修改目的只是为实现其功能,方法不敢苟同,若有更加简便的 ...
- js EasyUI前台 全选的实现
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWcAAAEQCAIAAADj/SKjAAAgAElEQVR4nO1dz48ry1W+/5N3swaFEP ...
- 原生js二级联动
今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...
- JS对checkbox全选和取消全选
需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...
- 原生js实现三级复选框
工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head ...
- JS小案例--全选和全不选列表功能的实现
纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- js中的全选，不选，和反选按钮的设定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- kali中的webshell工具--webacoo
webacoo webshell其实就是放置在服务器上的一段代码 kali中生成webshell的工具 WeBaCoo(Web Backdoor Cookie) 特点及使用方法 类终端的shell 编 ...
- hyperledger fabric部署总结
之前在有道云笔记上分享过,但想想还是搬到这里来吧,以后统一方便整理自己的知识进入正题.... 之前在调研 hyperledger fabric,其实部署说明官网都有,只是东西都是国外的照着操作也会遇到 ...
- linux编译相关命令
一.编译可执行文件 g++ –c Hello.cpp 编译文件,生成目标文件Hello.o g++ Hello.o –o a.out 链接并重命名为可执行文件a.out g++ Hello.cc ...
- springMVC上传
1.页面 2.开始上传按钮对应的JS 3.添加文件按钮的方法,下图中1是从fast中取到的文件名称,2是文件图片的路径 下面就是后台的一些类.方法等 4.bean层,生成的get和set方法我就不写了 ...
- form 表单提交数据 不跳转解决办法
1. 利用隐藏的 iframe —— 只需form的 target 指向iframe的name:可不用form 的action默认提交,自己写ajax 提交数据. <html> < ...
- Android开发资源收集
收集Android开发用得上的资源,方便查询 像大牛一样写代码: 31个Android 开发者工具 Android 流行框架查速表 数据结构和算法练习awesome-java-leetcode And ...
- win10家庭版升级为专业版（win10专业版激活方法）
替换专业版密钥 1.在win10家庭版桌面上鼠标右键点击[此电脑]-[属性],点击右下角的[更改产品密钥] 2.也可以点击开始-设置-更新和安全-激活-[更改产品密钥] 3.输入要升级的win10版本 ...
- 《ServerSuperIO Designer IDE使用教程》-1.标准Modbus和非标准协议的使用、测试以及驱动开发。附：v4.2发布
ServerSuperIO Designer IDE v4.2版本更新内容: 增加ServerSuperIO.Host运行程序,可以使用IDE进行测试,Host为运行环境. 针对设备驱动增加导入监测点 ...
- windows配置ssh免密登录linux
客户端(windows)要做的事情 默认机器上已安装git,若没有,请先安装git 查看本地是否有ssh公钥文件夹,若没有,则创建文件夹 mkdir ~/.ssh //创建文件夹 生成公钥 邮箱最好为 ...
- hbase_2
====HBase API========================================================= ** 配置maven依赖(pom.xml),不需要hado ...