限制復(fù)選框最多選擇項的實現(xiàn)代碼
更新時間：2016年05月30日 09:45:42 投稿：jingxian
下面小編就為大家?guī)硪黄拗茝?fù)選框最多選擇項的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在一個招聘網(wǎng)站中，通過限制用戶選擇職位標簽個數(shù)，可以精確定位用戶的職位。例如，以復(fù)選框的形式為用戶提供一下備選職位標簽，限制用戶最多選擇3個，當(dāng)超過三個時禁止用戶繼續(xù)選擇。
復(fù)選框在問卷調(diào)查，招聘網(wǎng)站用的很廣，今天來介紹一下限制復(fù)選框最多選擇幾項的方法：
思路：
監(jiān)聽復(fù)選框的onclick事件
checkbox.onclick = function(){
//代碼塊
}
監(jiān)聽復(fù)選框的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('最多只能選擇三項');
}
}
}
以上這篇限制復(fù)選框最多選擇項的實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了利用JS如何實現(xiàn)文字的聚合動畫效果，實現(xiàn)的效果非常不錯，類似粒子動畫的效果，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
EasyUi中的Combogrid 實現(xiàn)分頁和動態(tài)搜索遠程數(shù)據(jù)
jquery easyui中的combogrid比較特殊，算是combo和grid的組合，combogrid結(jié)合一個可編輯的文本框和下拉數(shù)據(jù)網(wǎng)格面板，可以讓用戶迅速找到并選擇，又可以進行搜索，展示與當(dāng)前輸入的字符相匹配的數(shù)據(jù)。下面給大家介紹EasyUi中的Combogrid 實現(xiàn)分頁和動態(tài)搜索遠程數(shù)據(jù)2016-04-04
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
CKEditor擴展插件：自動排版功能autoformat插件實現(xiàn)方法詳解
這篇文章主要介紹了CKEditor擴展插件：自動排版功能autoformat插件實現(xiàn)方法,結(jié)合實例形式詳細分析了CKEditor擴展插件實現(xiàn)自動排版功能的autoformat插件具體定義、配置與使用技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了完美實現(xiàn)八種js焦點輪播圖的具體資料，基于完美運動框架move2.js而完成的八種焦點錄播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
bootstrap響應(yīng)式導(dǎo)航條模板使用詳解（含下拉菜單，彈出框）
這篇文章主要為大家詳細介紹了bootstrap響應(yīng)式導(dǎo)航條模板使用詳解，含下拉菜單，彈出框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
今天小編就為大家分享一篇layui使用label標簽的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
分享12個Webpack中常用的Loader(小結(jié))
這篇文章主要介紹了分享12個Webpack中常用的Loader(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例
這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪<BR>2022-04-04