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è)屬性值取出來連接成字符串，并以逗號分開。

實(shí)現(xiàn)方法：

html部分：

<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>

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);

    });

});

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)動(dòng)態(tài)添加tr到table的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加tr到table的方法,涉及jQuery針對table表格元素的動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
JQuery 遮罩層實(shí)現(xiàn)(mask)實(shí)現(xiàn)代碼
用過ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我們的使用。
2010-01-01
jquery動(dòng)態(tài)加載select下拉框示例代碼
動(dòng)態(tài)加載select下拉框的實(shí)現(xiàn)方法有很多，在接下來的文章中為大家介紹下jquery是如何實(shí)現(xiàn)的
2013-12-12
jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效,涉及jquery基于鼠標(biāo)事件針對頁面元素遍歷與動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)
這篇文章主要是對jQuery獲取Radio,CheckBox選擇的Value值進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換
在做web前端開發(fā)的時(shí)候經(jīng)常遇到圖片滑動(dòng)切換特效，接下來通過本文給大家分享使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換特效，感興趣的朋友參考實(shí)現(xiàn)代碼
2017-08-08
jQuery 在光標(biāo)定位的地方插入文字的插件
jQuery 在光標(biāo)定位的地方插入文字的插件的實(shí)現(xiàn)代碼，通過獲取光標(biāo)位置，然后插入文字
2012-05-05
jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新
這篇文章主要介紹了jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
Jquery uploadify 多余的Get請求(404錯(cuò)誤)的解決方法
下面小編就為大家?guī)硪黄狫query uploadify 多余的Get請求(404錯(cuò)誤)的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01
jQuery使用empty()方法刪除元素及其所有子元素的方法
這篇文章主要介紹了jQuery使用empty()方法刪除元素及其所有子元素的方法,涉及jQuery操作元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03