JQuery勾選指定name的復選框集合并顯示的方法
更新時間：2015年05月18日 11:28:38 作者：永遠愛好寫程序
這篇文章主要介紹了JQuery勾選指定name的復選框集合并顯示的方法,涉及jQuery表單元素操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JQuery勾選指定name的復選框集合并顯示的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[name='love']").click(function () {
//獲得所有name為love的選中的復選框
var $Checks = $("input[name='love']:checked");
var arr = new Array();
//使用了元素的each方法
//循環(huán)Jquery對象里的dom數(shù)組
$Checks.each(function (index, value) {
//alert(value);
arr[index] = value.value;
});
$("#MessageInfo").text("你選擇了"+arr.length+"個愛好,"+arr.join(","));
});
});
</script>
</head>
<body>
<input type="checkbox" name="love" value="FootBall" />足球
<input type="checkbox" name="love" value="BasketBall" />籃球
<input type="checkbox" name="love" value="VallyBall" />排球
<p id="MessageInfo"></p>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
jquery對表單操作2，最近幾篇整理都是jquery表格操作相關，大家可以收藏下。2011-04-04
基于jQuery+HttpHandler實現(xiàn)圖片裁剪效果代碼(適用于論壇, SNS)
上次發(fā)了幾個jQuery的插件和些心得, 很多園友(也許是自己站上的)發(fā)郵件希望能提供更多的源碼, 正好這次有個同學希望在自己的壇子上掛個圖片裁剪以生成頭像的功能, 于是幫忙寫了這么個插件.也許很多園友用得著, 就一并發(fā)上來啦.2011-09-09
這篇文章主要介紹了jQuery中常用的遍歷函數(shù)用法,以實例形式分析并總結了jquery中常見的遍歷函數(shù)使用方法與注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
jQuery 瀑布流 絕對定位布局（二）(延遲AJAX加載圖片)
瀑布流-絕對定位布局，與浮動布局的區(qū)別在于布局不一樣,AJAX不一樣2012-05-05
因為要給新員工進行培訓jQuery.UI方面的內容，我之前學習的都是jquery.ui-1.6b的，現(xiàn)在的版本升級到jquery-ui-1.7.1，除了樣式上有很大調整以外，API也有了很大的變化。2009-08-08
jQuery網(wǎng)頁定位導航特效實現(xiàn)方法
這篇文章主要介紹了jQuery網(wǎng)頁定位導航特效實現(xiàn)方法,結合實例形式分析了jQuery網(wǎng)頁定位導航的功能描述、原理與核心實現(xiàn)代碼,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單每周輪換的日歷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
對于一個表格，為了更好的用戶體驗度，需要把選中的表格項添加高亮，下面小編給大家介紹使用jquery實現(xiàn)表格中點擊相應行變色功能的實例代碼，需要的朋友參考下2016-05-05
這篇文章主要介紹了jQuery實現(xiàn)日期聯(lián)動效果的方法,結合實例形式分析了jQuery針對日期及頁面元素動態(tài)操作的相關技巧,需要的朋友可以參考下2016-07-07
jQuery.ajax 用戶登錄驗證代碼，需要的朋友可以參考下。2010-10-10