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