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

网友投稿 210 2023-07-16


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

在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位。例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择3个,当超过三个时禁止用户继续选择。

复选框在问卷调查,招聘网站用的很广,今天来介绍一下限制复选框最多选择几项的方法:

思路:

监听复选框的onclick事件

checkbox.onclick = function(){

//代码块

}

监听复选框的checked属性:

if(chckbox.checked){

//代码块

}

HTML代码:

< input type= "checkbox" name= "sport"/>篮球

< input type= "checkbox" name= http://"sport"/>足球

< input type= "checkbox" name= "sport"/>排球

< input type= "checkbox" name= "sport"/>羽毛球

< input type= "checkbox" name= "sport"/>乒乓球

< 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('最多只能http://选择三项');

}

}

}

以上这篇限制复选框最多选择项的实现代码就是分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:动态更新highcharts数据的实现方法
下一篇:Bootstrap Paginator分页插件使用方法详解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~