限制复选框最多选择项的实现代码
更新时间：2016年05月30日 09:45:42 投稿：jingxian
下面小编就为大家带来一篇限制复选框最多选择项的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在一个招聘网站中，通过限制用户选择职位标签个数，可以精确定位用户的职位。例如，以复选框的形式为用户提供一下备选职位标签，限制用户最多选择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实现的简单的表单验证的相关资料,需要的朋友可以参考下2015-07-07
今天小编就为大家分享一篇关于Layui Table隐藏列问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
在做一个客户端基建项目的时候，多处需要用到JS调取命令行执行shell脚本，本文主要介绍了js执行shell命令的几种方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了js实现模拟计算器退格键删除文字效果的方法,涉及javascript字符串截取操作的相关技巧,需要的朋友可以参考下2015-05-05
一个电商的app,商品的展示是必不可少的,联动分类展示是很常见的,下面这篇文章主要给大家介绍了关于uniapp实现左右联动商品分类页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最近为小程序增加语音识别转文字的功能,坑路不断,特此记录,下面这篇文章主要给大家介绍了关于如何基于小程序实现发送语音消息及转文字功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
[红色]拖动层...2006-10-10
这篇文章主要介绍了JavaScript语法约定和程序调试原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
和同事讨论js时，我说较为理想的状态是，把js当一把好用的匕首，随手拿来，捅一刀子就走。话虽如此，但现实生活中大部分时候的情况是不理想的。2009-06-06
这篇文章主要介绍了让mocha支持ES6模块的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
最新评论