原生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/ ...
随机推荐
- 基于Gecko内核的简单浏览器实现
分享一个基于Gecko内核的简单浏览器实现过程. 项目需要需要开发一个简单浏览器,由于被访问的网页中有大量Apng做的动画,使用IE内核的webbrowser不能播放,使用基于WebKit和Cefsh ...
- Oracle 里 case 和decode的简单用法
case 就相想当于C#里面switch l 列:根据员工的职位,计算加薪后的薪水数据 如果职位是Analyst , 加薪10% 如果职位是Programmer 加薪5% 如果职位是clerk ...
- AQS学习笔记之独占锁
作用 参与 共享锁 acquireShared() 和 独占锁 acquire() 的抢锁逻辑, 具体的抢锁逻辑不作实现,只对第一次抢锁未抢到锁线程做处理,第一次抢锁就抢到的线程就不需要遇到AQS了 ...
- c++ 常用头文件
1.#include<iostream> iostream 的意思是输入输出流.#include<iostream>是标准的C++头文件,任何符合标准的C++开发环境都有这个头 ...
- Maven - 镜像<mirror>
使用镜像如果你的地理位置附近有一个速度更快的central镜像,或者你想覆盖central仓库配置,或者你想为所有POM使用唯一的一个远程仓库(这个远程仓库代理的所有必要的其它仓库),你可以使用set ...
- 利用android studio 生成 JNI需要的动态库so文件
JNI: Java Native Interface, 提供了java语言和其他语言(例如c和c++)进行相互调用的方式. 本文是用java调用c生成的so模式.其中,编译so文件过程如下: 1) ...
- 初识C语言（六）
数组 程序中需要容器,该容器有点特殊,它在程序中是一块连续的,大小固定并且里面的数据类型一致的内存空间,它的名字叫数组. 声明一个数组: 数据类型 数组名称[长度]; C语言中的数组初始化是有三种形式 ...
- windows使用pyecharts报错 No module named 'pyecharts_snapshot
下载此文件后,使用命令 pip install pyecharts_snapshot-0.1.8-py2.py3-none-any.whl 安装完成即可 链接地址:https://pypi.org/p ...
- NAT穿透解决
1.各种网络环境下的P2P通信解决方法: (1)如果通信双方在同一个局域网内,这种情况下可以不借助任何外力直接通过内网地址通信即可: (2)如果通信双方都在有独立的公网地址,这种情况下当然可以不借 ...
- Intellij IDEA 代码格式化/保存时自动格式化
这里介绍使用google style 一.安装插件 1.settings -> plugins 选择 Browse repositories… 2.搜索google-java-format 和 ...