快捷導(dǎo)航

jQuery 獲取多選框的值及多選框中文的函數(shù)

更新時間：2016年05月16日 17:01:05 作者：FungLeo

這篇文章主要介紹了jQuery 獲取多選框的值及多選框中文的函數(shù)的相關(guān)資料,需要的朋友可以參考下

DOM結(jié)構(gòu)

我的多選框的dom結(jié)構(gòu),都是下面這種的.都是基礎(chǔ)知識,不做過多闡述.

<label class="input_checkbox">
<input type="checkbox" name="sell_area" vlaue="0">
<span>甘肅</span>
</label>
<label class="input_checkbox">
<input type="checkbox" name="sell_area" vlaue="1">
<span>青海</span>
</label>
<label class="input_checkbox">
<input type="checkbox" name="sell_area" vlaue="2">
<span>陜西</span>
</label>
<label class="input_checkbox">
<input type="checkbox" name="sell_area" vlaue="3">
<span>寧夏</span>
</label>

使用這種方法的優(yōu)點(diǎn)是,點(diǎn)擊文字就可以選擇多選框了.并且可以使用CSS來美化整個樣式.

JS代碼

返回已經(jīng)選中的多選框的值函數(shù)

function returnCheckboxVal(name){
var data="";
$('input:checkbox[name="'+name+'"]:checked').each(function(){
data += $(this).attr("vlaue")+",";
});
return data.substring(0,data.length-1);
}

通過這個函數(shù),可以按照我們的需要,返回相應(yīng)name值的多選框選中的項(xiàng)目的值,以1,2,3的方式返回

好,這里需要解釋一下了,為什么我使用$(this).attr("vlaue")這種方式來獲取.

其實(shí)我從搜索引擎找到的是 $(this).val() 的方式獲取的.但是我很奇怪,我返回的值全部是on.

可能和我使用的是 jquery2.0的版本有關(guān)系,但具體是什么原因,我沒有深究.

返回已經(jīng)選中的多選框的項(xiàng)目名稱

如上,可能我需要返回的是甘肅,青海,陜西,寧夏這樣的項(xiàng)目名.當(dāng)然,這個也是可以做到的.

不過,這個嚴(yán)重依賴我上面的DOM結(jié)構(gòu),如果結(jié)構(gòu)不相同的話,需要做適當(dāng)?shù)男薷牡?

function returnCheckboxItem(name){
var data="";
$('input:checkbox[name="'+name+'"]:checked').each(function(){
data += $(this).siblings('span').html()+",";
});
return data.substring(0,data.length-1);
}

總結(jié)

網(wǎng)上搜索來的代碼不一定都是正確的.但大體思路應(yīng)該不會錯.

其中的差異可能是標(biāo)點(diǎn)符號(中英文)\縮進(jìn)(中文全角空格)\或者是使用的JQ版本不相同.

所以找到的代碼不能使用的時候,仔細(xì)排查一下,或許用更原始的方法可能會解決問題.

以上所述是小編給大家介紹的jQuery 獲取多選框的值及多選框中文的函數(shù)的相關(guān)知識，希望能夠幫助到大家。

您可能感興趣的文章:

相關(guān)文章

jQuery中內(nèi)容過濾器簡單用法示例
這篇文章主要介紹了jQuery中內(nèi)容過濾器簡單用法,結(jié)合實(shí)例形式分析了jQuery中內(nèi)容過濾器的相關(guān)概念、功能、應(yīng)用場景及相關(guān)使用方法,需要的朋友可以參考下
2018-03-03
jQuery選中select控件無法設(shè)置selected的解決方法
select 控件的 option用jQuery動態(tài)添加，然后選中某項(xiàng)時，IE6不能執(zhí)行（火狐沒問題），用try{}catch(err){alert(err.description);}提示為“無法設(shè)置selected屬性未指明的錯誤”
2010-09-09
jQuery UI 實(shí)例講解 - 日期選擇器(Datepicker)
下面小編就為大家?guī)硪黄猨Query UI 實(shí)例講解 - 日期選擇器(Datepicker)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jquery創(chuàng)建一個新的節(jié)點(diǎn)對象(自定義結(jié)構(gòu)/內(nèi)容)的好方法
jq創(chuàng)建一個新的節(jié)點(diǎn)對象,這對一些自定義功能很有幫助，而且可以隨意控制對象的結(jié)構(gòu)與內(nèi)容，何樂而不為呢，看到這里，相信有些朋友已經(jīng)按耐不住了，好記下來為大家介紹實(shí)現(xiàn)方法，感興趣的朋友可以了解下哦
2013-01-01
jquery實(shí)現(xiàn)的判斷倒計(jì)時是否結(jié)束代碼
在一些購物網(wǎng)站經(jīng)常會遇到倒計(jì)時的功能，例如某些商品在一定期限內(nèi)搞活動，下面小編給大家分享一段代碼關(guān)于jquery實(shí)現(xiàn)的判斷倒計(jì)時是否結(jié)束代碼，希望對大家有所幫助
2016-02-02
基于jQuery實(shí)現(xiàn)列表循環(huán)滾動小技巧(超簡單)
只要能夠不停地把第一個item移動到末尾，其余的自會往上填補(bǔ)空缺，填補(bǔ)的過程用動畫放慢些，就能有不斷滾動的視覺效果了，這種效果基于jquery怎么實(shí)現(xiàn)呢？下面小編給大家?guī)砹薺Query列表循環(huán)滾動效果的實(shí)現(xiàn)思路代碼，一起看看吧
2021-08-08
jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live
這篇文章主要介紹了jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live 的相關(guān)資料,非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
jquery網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn)
本篇文章主要介紹了jquery網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn) ，在頁面加載的時候，上方紅色的進(jìn)度條，有興趣的可以了解一下
2017-06-06
學(xué)習(xí)jQuery中的noConflict()用法
在本篇文章中我們整理了關(guān)于學(xué)習(xí)jQuery中的noConflict()用法的相關(guān)知識點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。
2018-09-09
基于jquery的多功能軟鍵盤插件
支持查詢功能的鍵盤和簡單得軟鍵盤，鍵盤樣式完全在獨(dú)立的css文件中定義，可以自行美化
2012-07-07