DIV CSS 佈局教程網

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

以上這篇限制復選框最多選擇項的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。