用原生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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 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
世界上第一台立体声收音机
2021/03/01 无线电
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
php实现可运算的验证码
2015/11/10 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Django框架自定义session处理操作示例
2019/05/27 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python字典按照value排序方法
2020/12/28 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
11月红领巾广播稿
2014/01/17 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
租赁意向书范本
2014/04/01 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang