用原生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 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
node中使用shell脚本的方法步骤
Mar 23 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和javascript之间变量的传递实现代码
2012/12/19 PHP
基于php实现的验证码小程序
2016/12/13 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
javascript call方法使用说明
2010/01/11 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
MYSQL支持事务吗
2013/08/09 面试题
绿化先进工作者事迹材料
2014/01/30 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
老公给老婆的保证书
2014/04/28 职场文书
营销团队口号
2014/06/06 职场文书
放飞理想主题班会
2015/08/14 职场文书