原生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/ ...
随机推荐
- C# Datetime时间指定时区
string start_time_str = "2018-03-21 06:00:00"; DateTime.Parse(start_time_str) // :: 格林威治时间 ...
- webbrowser设置为相应的IE版本
注册表路径: HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATU ...
- 第十七节，OpenCV（学习六）图像轮廓检测
1.检测轮廓 轮廓检测是图像处理中经常用到的,OpenCV-Python接口中使用cv2.findContours()函数查找检测物体的轮廓. cv2.findContours(image, mode ...
- oracle查看执行最慢与查询次数最多的sql语句及其执行速度很慢的问题分析
oracle查看执行最慢与查询次数最多的sql语句 注:本文来源 于<oracle查看执行最慢与查询次数最多的sql语句> 前言 在ORACLE数据库应用调优中,一个SQL的执行次数/频率 ...
- javascript中new Date()存在的兼容性问题
问题:通过new Date()创建的时间对象在Chrome能正常工作,但在IE浏览器却显示NaN 代码: var time = new Date(date + ' 00:00:00'); //NaN ...
- Django2.0 和 Django1 中的正则匹配问题
2.0内的path匹配正则时候无效时,导入re_path即可 from django.urls import path,re_path from king_admin import views url ...
- iOS开发之获取当前展示的VC
/** 递归查找当前显示的VC*/ + (UIViewController *)recursiveFindCurrentShowViewControllerFromViewController:(UI ...
- 记录一次go性能调试的过程
安装 go, git, go-torch 备注, go1.11后, 集成了 go-torch
- coding基本功实践
作为一名程序员,除了需要具备解决问题的思路以外,代码的质量和简洁性也很关键.因为从一个人的代码可以直接看出你的基本功.对于Python而言,这就意味着你需要对Python的内置功能和库有很深入的了解. ...
- Flink RichSourceFunction应用，读关系型数据(mysql)数据写入关系型数据库(mysql)
1. 写在前面 Flink被誉为第四代大数据计算引擎组件,即可以用作基于离线分布式计算,也可以应用于实时计算.Flink的核心是转化为流进行计算.Flink三个核心:Source,Transforma ...