jQuery 獲取多選框的值及多選框中文的函數(shù)
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)點是,點擊文字就可以選擇多選框了.并且可以使用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值的多選框選中的項目的值,以1,2,3的方式返回
好,這里需要解釋一下了,為什么我使用$(this).attr("vlaue")這種方式來獲取.
其實我從搜索引擎找到的是 $(this).val() 的方式獲取的.但是我很奇怪,我返回的值全部是on.
可能和我使用的是 jquery2.0的版本有關(guān)系,但具體是什么原因,我沒有深究.
返回已經(jī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)點符號(中英文)\縮進(jìn)(中文全角空格)\或者是使用的JQ版本不相同.
所以找到的代碼不能使用的時候,仔細(xì)排查一下,或許用更原始的方法可能會解決問題.
以上所述是小編給大家介紹的jQuery 獲取多選框的值及多選框中文的函數(shù)的相關(guān)知識，希望能夠幫助到大家。
相關(guān)文章
這篇文章主要介紹了jQuery中內(nèi)容過濾器簡單用法,結(jié)合實例形式分析了jQuery中內(nèi)容過濾器的相關(guān)概念、功能、應(yīng)用場景及相關(guān)使用方法,需要的朋友可以參考下2018-03-03
jQuery選中select控件 無法設(shè)置selected的解決方法
select 控件的 option用jQuery動態(tài)添加，然后選中某項時，IE6不能執(zhí)行（火狐沒問題），用try{}catch(err){alert(err.description);}提示為“無法設(shè)置selected屬性 未指明的錯誤”2010-09-09
jQuery UI 實例講解 - 日期選擇器(Datepicker)
下面小編就為大家?guī)硪黄猨Query UI 實例講解 - 日期選擇器(Datepicker)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
jquery創(chuàng)建一個新的節(jié)點對象(自定義結(jié)構(gòu)/內(nèi)容)的好方法
jq創(chuàng)建一個新的節(jié)點對象,這對一些自定義功能很有幫助，而且可以隨意控制對象的結(jié)構(gòu)與內(nèi)容，何樂而不為呢，看到這里，相信有些朋友已經(jīng)按耐不住了，好記下來為大家介紹實現(xiàn)方法，感興趣的朋友可以了解下哦2013-01-01
jquery實現(xiàn)的判斷倒計時是否結(jié)束代碼
在一些購物網(wǎng)站經(jīng)常會遇到倒計時的功能，例如某些商品在一定期限內(nèi)搞活動，下面小編給大家分享一段代碼關(guān)于jquery實現(xiàn)的判斷倒計時是否結(jié)束代碼，希望對大家有所幫助2016-02-02
基于jQuery實現(xiàn)列表循環(huán)滾動小技巧(超簡單)
只要能夠不停地把第一個item移動到末尾，其余的自會往上填補空缺，填補的過程用動畫放慢些，就能有不斷滾動的視覺效果了，這種效果基于jquery怎么實現(xiàn)呢？下面小編給大家?guī)砹薺Query列表循環(huán)滾動效果的實現(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)度條的實現(xiàn)
本篇文章主要介紹了jquery網(wǎng)頁加載進(jìn)度條的實現(xiàn) ，在頁面加載的時候，上方紅色的進(jìn)度條，有興趣的可以了解一下2017-06-06
學(xué)習(xí)jQuery中的noConflict()用法
在本篇文章中我們整理了關(guān)于學(xué)習(xí)jQuery中的noConflict()用法的相關(guān)知識點內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2018-09-09
支持查詢功能的鍵盤和簡單得軟鍵盤，鍵盤樣式完全在獨立的css文件中定義，可以自行美化2012-07-07