jQuery將所有被選中的checkbox某個(gè)屬性值連接成字符串的方法
更新時(shí)間：2015年01月24日 10:24:39 投稿：shichen2014
這篇文章主要介紹了jQuery將所有被選中的checkbox某個(gè)屬性值連接成字符串的方法,可實(shí)現(xiàn)將選中屬性值連接成字符串的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery將所有被選中的checkbox某個(gè)屬性值連接成字符串的方法。分享給大家供大家參考。具體如下：
需求：
對(duì)于一組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);
});
});
希望本文所述對(duì)大家的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)文章
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加tr到table的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加tr到table的方法,涉及jQuery針對(duì)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)事件針對(duì)頁面元素遍歷與動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)
這篇文章主要是對(duì)jQuery獲取Radio,CheckBox選擇的Value值進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助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)定位的地方插入文字的插件的實(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請(qǐng)求(404錯(cuò)誤)的解決方法
下面小編就為大家?guī)硪黄狫query uploadify 多余的Get請(qǐng)求(404錯(cuò)誤)的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
jQuery使用empty()方法刪除元素及其所有子元素的方法
這篇文章主要介紹了jQuery使用empty()方法刪除元素及其所有子元素的方法,涉及jQuery操作元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03