原生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/ ...
随机推荐
- 常用软件记录 ( Windows )
带括号注明的为主力软件 现安装的: 360驱动大师 7-Zip Acrobat Reader DC Adobe Photoshop 7.0 Anaconda babun Bandizip (解压) b ...
- C# - 设计模式 - 虚模式
虚模式 问题场景 子类从抽象派生是为了解耦,但为了适应新的变化,可能需要向抽象类添加新功能,假如在添加新功能之前已经有100个子类实现了抽象,那么接下来你得在100个子类中去重写向抽象添加的新功能. ...
- 2018-2019-2 20165234 《网络对抗技术》 Exp3 免杀原理与实践
实验三 免杀原理与实践 实验内容 1.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧:(1.5分) 2.通过 ...
- day13 闭包及装饰器
""" 今日内容: 1.函数的嵌套定义及必包 2.global 与 nonlocal 关键字 3.开放封闭原则及装饰器 """ " ...
- 团队Github实战训练
班级:软件工程1916|W 作业:团队Github实战训练 团队名称:SkyReach Github地址:Github地址 贡献比例表 队员学号 队员姓名 此次活动任务 贡献比例 221600106 ...
- NB-IoT有三种部署方式及特点【转】
转自:http://blog.sina.com.cn/s/blog_13ddf053f0102wcbz.html NB-IoT有三种运营模式,一种是独立的在运营商的网络外面重做:第二种是在LTE的保护 ...
- PHP Excel使用方法
下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...
- -bash: yum: command not found
在学习Linux时,发现yum命令无法执行.便查了下,整理成文. yum介绍 Yum(全称为 Yellow dogUpdater, Modified)是一个在Fedora和RedHat以及CentOS ...
- 二， 字符串和编码之 python 格式化
1),在Python中,采用的格式化方式和C语言是一致的,用%实现,看下例: >>> 'Hello, %s' % 'world' 'Hello, world' >>> ...
- 在ubuntu18 安装nginx过程，以及遇到的错误！
1.下载 nginx下载的地址:https://nginx.org/en/download.html 2.解压 指定一个目录下面放置下载的文件,然后解压文件 命令:tar zxvf nginx-1.6 ...