限制復(fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼
更新時(shí)間：2016年05月30日 09:45:42 投稿：jingxian
下面小編就為大家?guī)?lái)一篇限制復(fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在一個(gè)招聘網(wǎng)站中，通過(guò)限制用戶選擇職位標(biāo)簽個(gè)數(shù)，可以精確定位用戶的職位。例如，以復(fù)選框的形式為用戶提供一下備選職位標(biāo)簽，限制用戶最多選擇3個(gè)，當(dāng)超過(guò)三個(gè)時(shí)禁止用戶繼續(xù)選擇。
復(fù)選框在問(wèn)卷調(diào)查，招聘網(wǎng)站用的很廣，今天來(lái)介紹一下限制復(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)代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
.call()是JavaScript中用于顯式設(shè)置函數(shù)執(zhí)行上下文并立即調(diào)用該函數(shù)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
js實(shí)現(xiàn)div閃爍原理及實(shí)現(xiàn)代碼
閃爍的原理是什么呢：其實(shí)就一個(gè)，display在none與block之間頻繁的交替，這樣說(shuō)你明白了么，示例代碼如下，希望對(duì)大家有所幫助2014-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序重寫tabbar底部導(dǎo)航，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JS實(shí)現(xiàn)可移動(dòng)模態(tài)框
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)可移動(dòng)模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要展示了JS文字球狀放大效果，和放大鏡放大文字一樣，很神奇的代碼，感興趣的小伙伴們可以參考一下2015-08-08
JSONObject-lib包是一個(gè)beans,collections,maps,java arrays和xml和JSON互相轉(zhuǎn)換的包，本文給大家介紹jsonobject使用方法相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JavaScript無(wú)操作后屏保功能的實(shí)現(xiàn)方法
今天組里的同事要寫一個(gè)屏保的效果，要求鼠標(biāo)無(wú)操作N秒后進(jìn)入屏幕保護(hù)，滑動(dòng)鼠標(biāo)的時(shí)候取消屏幕保護(hù)。我真是難倒了，糾結(jié)了半天，搞定了，下面給大家分享實(shí)現(xiàn)代碼2017-07-07
基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理
這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理的相關(guān)資料，小編認(rèn)為非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
有時(shí)候我們需要在新窗口執(zhí)行一些代碼并講求將執(zhí)行的結(jié)果返回到這個(gè)頁(yè)面，那么就需要下面的方法，js常用的就是下面這中方法。2010-12-12
本篇文章主要是對(duì)JS二維數(shù)組的定義進(jìn)行了說(shuō)明介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03