限制復選框最多選擇項

在一個招聘網站中，通過限制用戶選擇職位標簽個數，可以精確定位用戶的職位。例如，以復選框的形式為用戶提供一下備選職位標簽，限制用戶最多選擇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('最多只能選擇三項');
                                }
                           }
                     }

掃描微信二維碼關注微信公眾號：