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è)問(wèn)題經(jīng)常被各大論壇問(wèn)到，因?yàn)闄z測(cè)checkbox不像檢測(cè)輸入框那么簡(jiǎn)單，尤其是判斷個(gè)數(shù)也經(jīng)常會(huì)遇到，所以說(shuō)覺(jué)得這個(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)文章
原生JS實(shí)現(xiàn)動(dòng)態(tài)添加新元素、刪除元素方法
這篇文章主要介紹了原生js實(shí)現(xiàn)動(dòng)態(tài)添加新元素、刪除元素方法 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
值得學(xué)習(xí)的JavaScript調(diào)試技巧分享
這篇文章主要給大家介紹了一些JavaScript調(diào)試技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
學(xué)習(xí)JavaScript正則表達(dá)式
這篇文章主要介紹了JavaScript正則表達(dá)式，詳細(xì)深入的了解JavaScript正則表達(dá)式，從而更熟練掌握J(rèn)avaScript正則表達(dá)式，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)右鍵彈出自定義菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js跨域請(qǐng)求數(shù)據(jù)的3種常用的方法
這篇文章主要介紹了js跨域請(qǐng)求數(shù)據(jù)的3種常用的方法，需要的朋友可以參考下2015-12-12
表格隔行顏色，就是通過(guò)判斷當(dāng)前表格的單數(shù)進(jìn)行判斷。一般asp中應(yīng)用的比較廣泛。2009-12-12
前端實(shí)現(xiàn)跨頁(yè)面通信的最全實(shí)現(xiàn)方案指南
這篇文章將從同源頁(yè)面,不同源頁(yè)面,父子框架三個(gè)維度,詳細(xì)為大家講解前端跨頁(yè)面通信的各種實(shí)現(xiàn)方案,并提供代碼示例和對(duì)比分析,需要的小伙伴可以參考下2025-04-04
這篇文章主要介紹了JavaScript類(lèi)型判斷的四種方法，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-10-10
關(guān)于layui的下拉搜索框異步加載數(shù)據(jù)的解決方法
今天小編就為大家分享一篇關(guān)于layui的下拉搜索框異步加載數(shù)據(jù)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)方法
在Array的顯示原型下有一個(gè)flat方法,可以將多維數(shù)組,降維,傳的參數(shù)是多少就降多少維,下面這篇文章主要給大家介紹了關(guān)于JavaScript中數(shù)組flat方法的使用與實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-08-08