jquery統(tǒng)計(jì)用戶選中的復(fù)選框的個(gè)數(shù)
更新時(shí)間：2014年06月06日 09:30:07 作者：
使用選擇器得到所有被勾選的復(fù)選框元素的集合，然后通過(guò)判斷元素的個(gè)數(shù)來(lái)得到用戶勾選的個(gè)數(shù),需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="check" value="one"/>one<br/>
<input type="checkbox" name="check" value="two"/>two<br/>
<input type="checkbox" name="check" value="three"/>three<br/>
<input type="checkbox" name="check" value="four"/>four<br/>
<input type="checkbox" name="check" value="five"/>five<br/>
<input type="checkbox" name="check" value="six"/>six<br/>
<input type="checkbox" name="check" value="seven"/>seven<br/>
<button name="sub">提交</button>
<script type="text/javascript">
$("button[name=sub]").click(function(){
var len = $("input:checkbox:checked").length;
alert("你一共選中了"+len+"個(gè)復(fù)選框");
})
</script>
</body>
</html>
使用選擇器得到所有被勾選的復(fù)選框元素的集合，然后通過(guò)判斷元素的個(gè)數(shù)來(lái)得到用戶勾選的個(gè)數(shù)。
有的時(shí)候，我們還對(duì)用戶勾選復(fù)選框的個(gè)數(shù)做了限制，假設(shè)只能勾選三個(gè)，相應(yīng)的代碼是這樣的：
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="check" value="one"/>one<br/>
<input type="checkbox" name="check" value="two"/>two<br/>
<input type="checkbox" name="check" value="three"/>three<br/>
<input type="checkbox" name="check" value="four"/>four<br/>
<input type="checkbox" name="check" value="five"/>five<br/>
<input type="checkbox" name="check" value="six"/>six<br/>
<input type="checkbox" name="check" value="seven"/>seven<br/>
<script type="text/javascript">
$("input:checkbox").click(function(){
var len = $("input:checkbox:checked").length;
if(len>3){
alert('親，最多只能選三個(gè)喲~');
return false; //另剛才勾選的取消
}
})
</script>
</body>
</html>
您可能感興趣的文章:
- jquery獲取復(fù)選框被選中的值
- jquery判斷checkbox(復(fù)選框)是否被選中的代碼
- jquery操作復(fù)選框(checkbox)的12個(gè)小技巧總結(jié)
- jquery如何獲取復(fù)選框的值
- JQUERY復(fù)選框CHECKBOX全選,取消全選
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
- jquery獲取復(fù)選框被選中的值
- Jquery獲取復(fù)選框被選中值的簡(jiǎn)單方法
- jquery復(fù)選框CHECKBOX全選、反選
- jquery實(shí)現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值
- jQuery遍歷頁(yè)面所有CheckBox查看是否被選中的方法
- Jquery遍歷checkbox獲取選中項(xiàng)value值的方法
- checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)遍歷復(fù)選框的方法示例
相關(guān)文章
ID是html頁(yè)面中一些元素都可以有個(gè)本頁(yè)面唯一的id包括如,div,input,iframe等等都是可以的,下面我來(lái)給大家介紹利用jquery 獲取id值方法,有需要了解的朋友可參考2013-09-09
這篇文章主要為大家詳細(xì)介紹了jquery ajaxfileupload異步上傳插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
jQuery怎么解析Json字符串(Json格式/Json對(duì)象)
可以利用jquery或js解析json數(shù)據(jù)，下面與大家分享下jquery解析json字符串方法，一個(gè)是解析Json格式，一個(gè)是解析Json對(duì)象，感興趣的朋友可以學(xué)習(xí)下2013-08-08
jQuery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的多級(jí)下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的多級(jí)下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁(yè)面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery 操作input中radio的技巧的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-07-07
jQuery的Scrollify插件實(shí)現(xiàn)滑動(dòng)到頁(yè)面下一節(jié)點(diǎn)
這篇文章主要介紹了jQuery的Scrollify插件實(shí)現(xiàn)滑動(dòng)到頁(yè)面下一節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2015-07-07
用jquery方法操作radio使其默認(rèn)選項(xiàng)是否
用jquery方法操作,使其默認(rèn)選項(xiàng)是或否，具體實(shí)現(xiàn)如下，喜歡的朋友不妨參考下，或許可以用得到哦2013-09-09
使用jQuery快速解決input中placeholder值在ie中無(wú)法支持的問(wèn)題
本篇文章主要介紹了使用jQuery快速解決input中placeholder值在ie中無(wú)法支持的問(wèn)題。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼,通過(guò)簡(jiǎn)單的jQuery操作鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素樣式的切換功能,非常美觀大方,需要的朋友可以參考下2015-09-09
jQuery UI 實(shí)現(xiàn)email輸入提示實(shí)例
本文為大家介紹下使用jQuery UI 實(shí)現(xiàn)email輸入提示，具體思路如下，感興趣的朋友可以參考下2013-08-08