限制复选框最多选择项的实现代码
在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位。例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择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('最多只能选择三项'); } } }
以上这篇限制复选框最多选择项的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
EasyUi中的Combogrid 实现分页和动态搜索远程数据
jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据。下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据2016-04-04CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
这篇文章主要介绍了CKEditor扩展插件:自动排版功能autoformat插件实现方法,结合实例形式详细分析了CKEditor扩展插件实现自动排版功能的autoformat插件具体定义、配置与使用技巧,需要的朋友可以参考下2020-02-02bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
这篇文章主要为大家详细介绍了bootstrap响应式导航条模板使用详解,含下拉菜单,弹出框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-11-11JS生态系统加速探索Draft-js emoji插件功能及使用探索
这篇文章主要介绍了JS生态系统加速探索Draft-js emoji插件功能使用探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
最新评论