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