jQuery將所有被選中的checkbox某個屬性值連接成字符串的方法
更新時間：2015年01月24日 10:24:39 投稿：shichen2014
這篇文章主要介紹了jQuery將所有被選中的checkbox某個屬性值連接成字符串的方法,可實現(xiàn)將選中屬性值連接成字符串的功能,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery將所有被選中的checkbox某個屬性值連接成字符串的方法。分享給大家供大家參考。具體如下：
需求：
對于一組checkbox，當點擊每個checkbox后，把當前處于選中狀態(tài)的checkbox的某個屬性值取出來連接成字符串，并以逗號分開。
實現(xiàn)方法：
html部分：
復制代碼 代碼如下:
<input type="checkbox" id="1"/>
<label for="1">選項一</label>
<br/>
<input type="checkbox" id="2"/>
<label for="2">選項二</label>
<br />
<input type="checkbox" id="3"/>
<label for="3">選項三</label>
<br/>
<span id="result"></span>
<label for="1">選項一</label>
<br/>
<input type="checkbox" id="2"/>
<label for="2">選項二</label>
<br />
<input type="checkbox" id="3"/>
<label for="3">選項三</label>
<br/>
<span id="result"></span>
jQuery部分，給每個checkbox定義點擊事件，遍歷所有選中的checkbox。
復制代碼 代碼如下:
$(function() {
$("input[type=checkbox]").on("click", function () {
var vIds = "";
$("input:checked").each(function() {
vIds += $(this).attr('id') + ",";
});
if (vIds.length > 0) {
vIds = vIds.substring(0, vIds.length - 1);
}
$('#result').text(vIds);
});
});
$("input[type=checkbox]").on("click", function () {
var vIds = "";
$("input:checked").each(function() {
vIds += $(this).attr('id') + ",";
});
if (vIds.length > 0) {
vIds = vIds.substring(0, vIds.length - 1);
}
$('#result').text(vIds);
});
});
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
取得select選擇的文本與值的情形在很多地方都有用到，且實現(xiàn)的方法有很多，在下面的示例中將為大家詳細介紹下jquery是如何做到的2013-12-12
這篇文章主要介紹了jQuery中not()方法用法,實例分析了not()方法的功能、定義及刪除與指定表達式匹配的元素的使用技巧,需要的朋友可以參考下2015-01-01
本文為大家介紹下jquery獲得option的值和對option的操作，下面有不錯的示例分析及示例代碼，感興趣的朋友可以了解下2013-12-12
jQuery實現(xiàn)html table行Tr的復制、刪除、計算功能
這篇文章主要介紹了jQuery實現(xiàn)html table行Tr的復制、刪除、計算功能,涉及jQuery針對table表格的常見復制、添加、刪除與計算行數(shù)等簡單操作技巧,需要的朋友可以參考下2017-07-07
jQuery.animate的每種動畫過渡效果都是通過easing函數(shù)實現(xiàn)的，下面是自己研究之后對其的基本認識
2014-08-08 
可兼容IE的獲取及設置cookie的jquery.cookie函數(shù)方法
在使用IE來測試的時候，發(fā)現(xiàn)Discuz中的common.js里面的getcookie和setcookie這兩個方法子啊IE下不起作用，因此有了jquery.cookie.js的由來，感興趣的朋友可以參考下
2013-09-09 
jQuery EasyUI 布局之動態(tài)添加tabs標簽頁
本文給大家介紹jquery easyui布局之動態(tài)添加tabs標簽頁，實現(xiàn)思路是這樣的通過調用add方法就可以輕松實現(xiàn)，本文分步驟給大家詳細介紹，需要的朋友一起學習吧
2015-11-11 
jQuery插件uploadify實現(xiàn)ajax效果的圖片上傳
本文主要介紹使用jQuery插件uploadify實現(xiàn)ajax效果的圖片上傳的功能，有需要的朋友可以參考一下。
2016-06-06 
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
LazyForm jQuery plugin 定制您的CheckBox Radio和Select ，需要的朋友可以參考下。
2009-10-10