JavaScript判斷表單中多選框checkbox選中個(gè)數(shù)的方法
更新時(shí)間：2015年08月17日 12:26:26 作者：企鵝
這篇文章主要介紹了JavaScript判斷表單中多選框checkbox選中個(gè)數(shù)的方法,涉及javascript針對(duì)checkbox復(fù)選框的遍歷與判斷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JavaScript判斷表單中多選框checkbox選中個(gè)數(shù)的方法。分享給大家供大家參考。具體如下：
這里使用JavaScript檢測(cè)并判斷出表單中多選框的選中個(gè)數(shù)，也就是checkbox被選擇了多少，在以前，這個(gè)問題經(jīng)常被各大論壇問到，因?yàn)闄z測(cè)checkbox不像檢測(cè)輸入框那么簡單，尤其是判斷個(gè)數(shù)也經(jīng)常會(huì)遇到，所以說覺得這個(gè)Js代碼還是很有用的，大家有興趣的再完善一下。
運(yùn)行效果如下圖所示：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-checkbox-chk-num-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>檢測(cè)表單多選框的選擇個(gè)數(shù)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<script language="javascript">
<!--
function anyCheck(form) {
var total = 0;
var max = form.ckbox.length;
for (var idx = 0; idx < max; idx++) {
if (eval("document.playlist.ckbox[" + idx + "].checked") == true) {
total += 1;
}
}
alert("您選擇了 " + total + " 個(gè)選項(xiàng)！");
}
//-->
</script>
<form method="post" name="playlist">
1<input type="checkbox" name="ckbox" value="1">
2<input type="checkbox" name="ckbox" value="2">
3<input type="checkbox" name="ckbox" value="3">
4<input type="checkbox" name="ckbox" value="4">
5<input type="checkbox" name="ckbox" value="5">
6<input type="checkbox" name="ckbox" value="6">
<br><input type="button" value="檢測(cè)選擇個(gè)數(shù)" onClick="anyCheck(this.form)">
</form>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript 瀏覽器類型和版本號(hào)檢測(cè)代碼(兼容多瀏覽器)
果對(duì)javascript了解不是特別深入的話,很容易就會(huì)寫出不兼容的代碼(就像我),這時(shí)候就得判斷瀏覽器了。比如事件偵聽、一些鼠標(biāo)和鍵盤事件、Range等,一些都會(huì)不一樣.下面列出幾種常用的檢測(cè)瀏覽器方法，以饗觀眾!2010-04-04
這篇文章主要為大家詳細(xì)介紹了js腳本編寫簡單刷票投票系統(tǒng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)方形抽獎(jiǎng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了JS清除選擇內(nèi)容的方法,較為詳細(xì)的分析了js操作文本的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家介紹了前端必會(huì)的Webpack優(yōu)化技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序文章詳情功能,結(jié)合完整實(shí)例形式詳細(xì)分析了微信小程序文章詳情功能具體步驟、原理及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06
這篇文章主要為大家介紹了JavaScript迭代器模式內(nèi)部黑盒子解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本文詳細(xì)講解了使用JS動(dòng)態(tài)構(gòu)建目錄樹的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了js圖片輪播效果實(shí)現(xiàn)代碼，文章對(duì)每一步進(jìn)行了詳細(xì)闡述，標(biāo)注注意事項(xiàng)，為順利實(shí)現(xiàn)js圖片輪播效果做好鋪墊，對(duì)輪播效果感興趣的朋友可以參考一下2015-11-11
JS的鼠標(biāo)監(jiān)聽mouseup鼠標(biāo)抬起失效原因及解決
這篇文章主要為大家介紹了JS的鼠標(biāo)監(jiān)聽mouseup鼠標(biāo)抬起失效原因及解決示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05