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

