這篇文章主要介紹了jQuery 獲取多選框的值及多選框中文的函數(shù)的相關(guān)資料,需要的朋友可以參考下
DOM結(jié)構(gòu)
我的多選框的dom結(jié)構(gòu),都是下面這種的.都是基礎(chǔ)知識(shí),不做過(guò)多闡述.
<label>
<input type="checkbox" name="sell_area" vlaue="0">
<span>甘肅</span>
</label>
<label>
<input type="checkbox" name="sell_area" vlaue="1">
<span>青海</span>
</label>
<label>
<input type="checkbox" name="sell_area" vlaue="2">
<span>陜西</span>
</label>
<label>
<input type="checkbox" name="sell_area" vlaue="3">
<span>寧夏</span>
</label>
使用這種方法的優(yōu)點(diǎn)是,點(diǎn)擊文字就可以選擇多選框了.并且可以使用CSS來(lái)美化整個(gè)樣式.
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);
}
通過(guò)這個(gè)函數(shù),可以按照我們的需要,返回相應(yīng)name值的多選框選中的項(xiàng)目的值,以1,2,3的方式返回
好,這里需要解釋一下了,為什么我使用$(this).attr("vlaue")這種方式來(lái)獲取.
其實(shí)我從搜索引擎找到的是 $(this).val() 的方式獲取的.但是我很奇怪,我返回的值全部是on.
可能和我使用的是 jquery2.0的版本有關(guān)系,但具體是什么原因,我沒(méi)有深究.
返回已經(jīng)選中的多選框的項(xiàng)目名稱
如上,可能我需要返回的是甘肅,青海,陜西,寧夏這樣的項(xiàng)目名.當(dāng)然,這個(gè)也是可以做到的.
不過(guò),這個(gè)嚴(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)上搜索來(lái)的代碼不一定都是正確的.但大體思路應(yīng)該不會(huì)錯(cuò).
其中的差異可能是標(biāo)點(diǎn)符號(hào)(中英文)\縮進(jìn)(中文全角空格)\或者是使用的JQ版本不相同.
所以找到的代碼不能使用的時(shí)候,仔細(xì)排查一下,或許用更原始的方法可能會(huì)解決問(wèn)題.
以上所述是小編給大家介紹的jQuery 獲取多選框的值及多選框中文的函數(shù)的相關(guān)知識(shí)，希望能夠幫助到大家。