用原生JS实现简单的多选框功能
时间:2019-03-30
本文章向大家介绍用原生JS实现简单的多选框功能,主要包括用原生JS实现简单的多选框功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="cheakAll" type="checkbox">全选 <div> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div> </body> </html> <script> //找到全选按钮 var oChkAllBtn=document.getElementById('cheakAll'); var oDiv=document.getElementsByTagName('div')[0]; var aInput=oDiv.getElementsByTagName('input'); var n=0; //计数器 //alert(aInput.length); //点击全选按钮,让其他的全部选中 oChkAllBtn.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++){ if(this.checked==true){//判断全选按钮自己的状态 aInput[i].checked=true; n=aInput.length; //控制计数器 }else{ aInput[i].checked=false; n=0; //控制计数器 } }; }; //-------------------------------------------- //每一个按钮绑定事件 for(var j=0; j<aInput.length; j++){ aInput[j].onclick=function(){ //如果我自己是cheaked状态 n++ 否则 n-- if(this.checked==true){ n++; }else{ n--; }; //console.log(n); //如果n==aInput.length if(n==aInput.length){ oChkAllBtn.checked=true; }else{ oChkAllBtn.checked=false; } }; }; </script>
以上所述是小编给大家介绍的用原生JS实现简单的多选框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Mono 3.2 测试NPinyin 中文转换拼音代码
- Reactive Extensions介绍
- Reactive Extensions(Rx) 学习
- 发布一个日期选择控件(ASPNET2.0)
- 做程序员压力山大,很多人都快疯了
- 小程序让交通出行变得如此简化,看看这些微信小程序你有在用了吗?
- 中小企业如何选择DDoS防御方案?
- “熊医生”出诊正确率超九成 医院:人工智能更多是辅助
- PLC编程优化方法,让程序运行提速!
- 这是硅谷狂人马斯克对未来做出的11个大胆预测,人工智能比核武器更危险
- 在腾讯云上使用自建DNS
- Spring 4.0.2 学习笔记(1) - 最基本的注入
- 关于女神SQLite的疑惑(2)
- WordPress纯代码仿无觅相关文章图文模式功能(增强版)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue使用uuid-npm快速生成uuid,适用于多种场景
- WPF调用图片或资源(Uri)
- Hexo部署远程仓库(Conding、Gitee、Github)
- Linux下安装nginx
- CSS简笔画logo系列:纯CSS绘制“Adidas” Logo
- Electron + Vue跨平台桌面应用开发实战教程(一)
- java_抽象类、接口、多态的使用
- Electron + Vue跨平台桌面应用开发实战教程(二)
- Oracle参数解析(nls_length_semantics)
- 创建单页
- Electron + Vue跨平台桌面应用开发实战教程(三)
- ES6箭头函数中this指向谁?
- 谈谈HTML中锚点及其使用
- java_数据类型转换、运算符
- JavaScript中字符串运算符是什么?有哪些?