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


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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
React中的Context应用场景分析
Jun 11 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
php简单获取目录列表的方法
2015/03/24 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP中常用的魔术方法
2017/04/28 PHP
一个实用的php验证码类
2017/07/06 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
JS实现div居中示例
2014/04/17 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Python OpenCV获取视频的方法
2018/02/28 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python找出因数与质因数的方法
2019/07/25 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
基于python检查矩阵计算结果
2020/05/21 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
大学校运会广播稿
2014/02/03 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
服务理念口号
2014/06/11 职场文书
优秀团支部申报材料
2014/12/26 职场文书
客服专员岗位职责
2015/02/10 职场文书
政审证明材料
2015/06/19 职场文书
委托收款证明
2015/06/23 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang