用原生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与vbscript数据共享
Jan 09 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
vue实现表格过滤功能
Sep 27 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
浅谈python常用程序算法
2019/03/22 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
python打包多类型文件的操作方法
2020/09/21 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
委托书格式
2014/08/01 职场文书
车辆转让协议书
2014/09/24 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python