用原生JS实现简单的多选框功能


Posted in Javascript onJune 12, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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实现简单的多选框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 居中漂浮广告
Mar 21 Javascript
jQuery 创建Dom元素
May 07 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 #Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 #Javascript
AngularJS 异步解决实现方法
Jun 12 #Javascript
jquery+css实现侧边导航栏效果
Jun 12 #jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 #Javascript
Vue非父子组件通信详解
Jun 12 #Javascript
详解angularjs 关于ui-router分层使用
Jun 12 #Javascript
You might like
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
印刷工程专业应届生求职信
2013/09/29 职场文书
展会邀请函范文
2014/01/26 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
毕业设计论文评语
2014/12/31 职场文书
我的长征观后感
2015/06/09 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书