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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

  2020-05-15 我要评论

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

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们