用原生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 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
jquery cookie的用法总结
Nov 18 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
js中实例与对象的区别讲解
2019/01/21 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
为python设置socket代理的方法
2015/01/14 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
就业自荐书
2013/12/05 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
仓库管理计划书
2014/05/04 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
见义勇为事迹材料
2014/12/24 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript