限制复选框最多选择项的实现代码
更新时间：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('最多只能选择三项');
}
}
}
以上这篇限制复选框最多选择项的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了利用JS如何实现文字的聚合动画效果，实现的效果非常不错，类似粒子动画的效果，有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
EasyUi中的Combogrid 实现分页和动态搜索远程数据
jquery easyui中的combogrid比较特殊，算是combo和grid的组合，combogrid结合一个可编辑的文本框和下拉数据网格面板，可以让用户迅速找到并选择，又可以进行搜索，展示与当前输入的字符相匹配的数据。下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据2016-04-04
这篇文章主要为大家详细介绍了小程序实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
CKEditor扩展插件：自动排版功能autoformat插件实现方法详解
这篇文章主要介绍了CKEditor扩展插件：自动排版功能autoformat插件实现方法,结合实例形式详细分析了CKEditor扩展插件实现自动排版功能的autoformat插件具体定义、配置与使用技巧,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了完美实现八种js焦点轮播图的具体资料，基于完美运动框架move2.js而完成的八种焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
bootstrap响应式导航条模板使用详解（含下拉菜单，弹出框）
这篇文章主要为大家详细介绍了bootstrap响应式导航条模板使用详解，含下拉菜单，弹出框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
今天小编就为大家分享一篇layui使用label标签的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了分享12个Webpack中常用的Loader(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
JS生态系统加速探索Draft-js emoji插件功能及使用探索
这篇文章主要介绍了JS生态系统加速探索Draft-js emoji插件功能使用探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
这篇文章主要为大家介绍了微信小程序配置视图层数据绑定相关示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪<BR>2022-04-04
最新评论