星空网 > 软件开发 > Java

限制复选框最多选择项

在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位。例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择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('最多只能选择三项');                }              }           }

扫描微信二维码关注微信公众号:

限制复选框最多选择项




原标题:限制复选框最多选择项

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

肯尼亚 海运:https://www.goluckyvip.com/tag/92252.html
到马里海运:https://www.goluckyvip.com/tag/92253.html
雅加达 海运:https://www.goluckyvip.com/tag/92254.html
西班牙fba海运:https://www.goluckyvip.com/tag/92255.html
西班牙海运港口:https://www.goluckyvip.com/tag/92256.html
到南非海运:https://www.goluckyvip.com/tag/92257.html
携程旅游网折扣优惠最新攻略(携程旅游网更佳折扣优惠):https://www.vstour.cn/a/411227.html
深圳到西安自驾路线攻略 深圳到西安自驾最佳路线:https://www.vstour.cn/a/411228.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流