限制复选框最多选择项

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

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