JavaScript判斷表單中多選框checkbox選中個數(shù)的方法
更新時間：2015年08月17日 12:26:26 作者：企鵝
這篇文章主要介紹了JavaScript判斷表單中多選框checkbox選中個數(shù)的方法,涉及javascript針對checkbox復選框的遍歷與判斷技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JavaScript判斷表單中多選框checkbox選中個數(shù)的方法。分享給大家供大家參考。具體如下：
這里使用JavaScript檢測并判斷出表單中多選框的選中個數(shù)，也就是checkbox被選擇了多少，在以前，這個問題經(jīng)常被各大論壇問到，因為檢測checkbox不像檢測輸入框那么簡單，尤其是判斷個數(shù)也經(jīng)常會遇到，所以說覺得這個Js代碼還是很有用的，大家有興趣的再完善一下。
運行效果如下圖所示：
在線演示地址如下：
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>檢測表單多選框的選擇個數(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 + " 個選項！");
}
//-->
</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="檢測選擇個數(shù)" onClick="anyCheck(this.form)">
</form>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關(guān)文章
javascript 瀏覽器類型和版本號檢測代碼(兼容多瀏覽器)
果對javascript了解不是特別深入的話,很容易就會寫出不兼容的代碼(就像我),這時候就得判斷瀏覽器了。比如事件偵聽、一些鼠標和鍵盤事件、Range等,一些都會不一樣.下面列出幾種常用的檢測瀏覽器方法，以饗觀眾!2010-04-04
這篇文章主要為大家詳細介紹了js腳本編寫簡單刷票投票系統(tǒng)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了JS實現(xiàn)方形抽獎效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了JS清除選擇內(nèi)容的方法,較為詳細的分析了js操作文本的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家介紹了前端必會的Webpack優(yōu)化技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序文章詳情功能,結(jié)合完整實例形式詳細分析了微信小程序文章詳情功能具體步驟、原理及功能實現(xiàn)技巧,需要的朋友可以參考下2020-06-06
這篇文章主要為大家介紹了JavaScript迭代器模式內(nèi)部黑盒子解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本文詳細講解了使用JS動態(tài)構(gòu)建目錄樹的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了js圖片輪播效果實現(xiàn)代碼，文章對每一步進行了詳細闡述，標注注意事項，為順利實現(xiàn)js圖片輪播效果做好鋪墊，對輪播效果感興趣的朋友可以參考一下2015-11-11
JS的鼠標監(jiān)聽mouseup鼠標抬起失效原因及解決
這篇文章主要為大家介紹了JS的鼠標監(jiān)聽mouseup鼠標抬起失效原因及解決示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05