限制复选框最多选择项的实现代码


Posted in Javascript onMay 30, 2016

在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位。例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择3个,当超过三个时禁止用户继续选择。

复选框在问卷调查,招聘网站用的很广,今天来介绍一下限制复选框最多选择几项的方法:

思路:

监听复选框的onclick事件

checkbox.onclick = function(){
 //代码块
}

监听复选框的checked属性:

if(chckbox.checked){
 //代码块
}

HTML代码:

< input type= "checkbox" name= "sport"/>篮球<br />
< input type= "checkbox" name= "sport"/>足球<br />
< input type= "checkbox" name= "sport"/>排球<br />
< input type= "checkbox" name= "sport"/>羽毛球<br/>
< input type= "checkbox" name= "sport"/>乒乓球<br/>
< p>最多选择三项</p>

JavaScript代码:

var sportSelect = document.getElementsByName('sport' ),
              maxNums   = 3;
           for(var i in sportSelect){
              sportSelect[i]. onclick = function (){
                 var _sportSelect = document.getElementsByName('sport' ),
                   cNums      = 0;
                 for(var i in _sportSelect){
                   if(i == 'length') break ;
                   if(_sportSelect[i].checked){
                      cNums ++;
                   }
                }
                 if(cNums > maxNums){
                   this.checked = false;
                    alert('最多只能选择三项');
                }
              }
           }

以上这篇限制复选框最多选择项的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 #Javascript
JS组件Bootstrap Table使用实例分享
May 30 #Javascript
Bootstrap table分页问题汇总
May 30 #Javascript
浅析Javascript中bind()方法的使用与实现
May 30 #Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 #Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 #Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
关于vue面试题汇总
2018/03/20 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python之变量类型和if判断方式
2020/05/05 Python
python中实现词云图的示例
2020/12/19 Python
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
财务会计应届生求职信
2013/11/24 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2014年教研员工作总结
2014/12/23 职场文书
班主任寄语2015
2015/02/26 职场文书
护士2015年终工作总结
2015/04/29 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python