jquery統(tǒng)計用戶選中的復(fù)選框的個數(shù)
更新時間:2014年06月06日 09:30:07 作者:
使用選擇器得到所有被勾選的復(fù)選框元素的集合,然后通過判斷元素的個數(shù)來得到用戶勾選的個數(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+"個復(fù)選框");
})
</script>
</body>
</html>
使用選擇器得到所有被勾選的復(fù)選框元素的集合,然后通過判斷元素的個數(shù)來得到用戶勾選的個數(shù)。
有的時候,我們還對用戶勾選復(fù)選框的個數(shù)做了限制,假設(shè)只能勾選三個,相應(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('親,最多只能選三個喲~');
return false; //另剛才勾選的取消
}
})
</script>
</body>
</html>
您可能感興趣的文章:
- jquery獲取復(fù)選框被選中的值
- jquery判斷checkbox(復(fù)選框)是否被選中的代碼
- jquery操作復(fù)選框(checkbox)的12個小技巧總結(jié)
- jquery如何獲取復(fù)選框的值
- JQUERY復(fù)選框CHECKBOX全選,取消全選
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實現(xiàn)代碼
- jquery獲取復(fù)選框被選中的值
- Jquery獲取復(fù)選框被選中值的簡單方法
- jquery復(fù)選框CHECKBOX全選、反選
- jquery實現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值
- jQuery遍歷頁面所有CheckBox查看是否被選中的方法
- Jquery遍歷checkbox獲取選中項value值的方法
- checkbox全選/取消全選以及checkbox遍歷jQuery實現(xiàn)代碼
- jQuery實現(xiàn)遍歷復(fù)選框的方法示例
相關(guān)文章
jQuery實現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法
這篇文章主要介紹jQuery實現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法,需要的朋友可以參考下2014-06-06jQuery插件FusionCharts繪制ScrollColumn2D圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts繪制ScrollColumn2D圖效果,結(jié)合實例形式分析了jQuery使用FusionCharts插件結(jié)合swf文件實現(xiàn)ScrollColumn2D圖的繪制功能,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery基于Ajax實現(xiàn)讀取XML數(shù)據(jù)功能示例
這篇文章主要介紹了jQuery基于Ajax實現(xiàn)讀取XML數(shù)據(jù)功能,結(jié)合實例形式分析了jQuery基于ajax的get方式獲取xml文件數(shù)據(jù)并輸出顯示相關(guān)操作技巧,需要的朋友可以參考下2018-05-05jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法,需要的朋友可以參考一下2013-05-05