原生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/ ...
随机推荐
- go [第一篇]初识
[第一篇] 简介 Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发 ...
- 使用Sales_data类
写一段程序程序实现求两次交易相加结果的功能.程序的输入是下面这两条交易记录: 0-201-783456-X 3 20.00 0-201-783456-X 3 25.00 程序的结构如下: #inclu ...
- C++变量/函数命名规范
## 参照Google C++编程规范之变量命名 1. 变量 变量名一律小写,单词间以下划线相连.类的成员变量以下划线结尾. 普通变量命名 举例: string window_name; // OK ...
- GIt -- fatal: refusing to merge unrelated histories 问题处理
今晚碰到这个问题-- fatal: refusing to merge unrelated histories 想了一下,为什么就这样了? 因为我是先本地创建了仓库,并添加了文件,然后再到github ...
- Eclipse install new software无反应
一个问题可以有不同的解决方案 其他人提供了不少方案 我遇到了这个问题 但是这些解决方案都无济于事 于是 我就采取了一个新方案: 然后重新解压,找到里面的eclipse.exe重新打开就可以了 现在有反 ...
- linux设置环境变量(这里以hive为例给大家举例)
1.进入: cd /export/servers/hive/bin/ -rwxr-xr-x. 1 root root 1031 Apr 30 2015 beeline-rw-r--r--. 1 roo ...
- tomcat配置文件及性能优化
收藏两个地址 配置文件: https://www.cnblogs.com/sunshine-1/p/8990044.html 性能调优: https://www.cnblogs.com/zhuawan ...
- [原创]Zynq AXI-CDMA的使用
Xilinx 提供了3种DMA AXI-DMA AXI-CDMA AXI-VDMA 使用CDMA能够满足项目需求(MM-MM),DS文档介绍如下: The Xilinx LogiCORE™ IP AX ...
- C# Post方式下，取得其它端传过来的数据
// Post方式下,取得java端传过来的数据 if ("post".Equals(context.Request.HttpMethod.ToLower())) { contex ...
- Web系统中Mic设备的应用实例
>>>>>>>>>>>>>>>>>>>>>>>>> ...