jQuery 獲取多選框的值及多選框中文的函數(shù)
DOM結(jié)構(gòu)
我的多選框的dom結(jié)構(gòu),都是下面這種的.都是基礎(chǔ)知識(shí),不做過多闡述.
<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來美化整個(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); }
通過這個(gè)函數(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)然,這個(gè)也是可以做到的.
不過,這個(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)上搜索來的代碼不一定都是正確的.但大體思路應(yīng)該不會(huì)錯(cuò).
其中的差異可能是標(biāo)點(diǎn)符號(hào)(中英文)\縮進(jìn)(中文全角空格)\或者是使用的JQ版本不相同.
所以找到的代碼不能使用的時(shí)候,仔細(xì)排查一下,或許用更原始的方法可能會(huì)解決問題.
以上所述是小編給大家介紹的jQuery 獲取多選框的值及多選框中文的函數(shù)的相關(guān)知識(shí),希望能夠幫助到大家。
- jQuery實(shí)現(xiàn)的多選框多級(jí)聯(lián)動(dòng)插件
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jquery對單選框,多選框,文本框等常見操作小結(jié)
- 簡單實(shí)現(xiàn)jQuery多選框功能
- jQuery對下拉框,單選框,多選框的操作
- jQuery多選框選擇數(shù)量限制方法
- jquery中表單 多選框的一種巧妙寫法
- jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
- Jquery多選框互相內(nèi)容交換的實(shí)例代碼
- jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)
- jQuery實(shí)現(xiàn)獲取多選框的值示例
相關(guān)文章
使用jQuery實(shí)現(xiàn)Web頁面換膚功能的要點(diǎn)解析
網(wǎng)頁換膚的實(shí)質(zhì)就是切換CSS樣式,關(guān)鍵是給用戶做出點(diǎn)擊切換的功能以及換膚完成之后的緩存記錄功能,下面我們就來看一下使用jQuery實(shí)現(xiàn)Web頁面換膚功能的要點(diǎn)解析:2016-05-05jquery實(shí)現(xiàn)圖片漸變切換兼容ie6/Chrome/Firefox
jquery代碼實(shí)現(xiàn)圖片漸變切換同時(shí)兼容ie6、Chrome、Firefox,想學(xué)習(xí)的朋友可以測試下,希望對大家有所幫助2013-08-08jQuery toggleClass應(yīng)用實(shí)例(附效果圖)
這篇文章主要介紹了jQuery toggleClass的應(yīng)用,需要的朋友可以參考下2014-04-04jQuery+CSS實(shí)現(xiàn)的網(wǎng)頁二級(jí)下滑菜單效果
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的網(wǎng)頁二級(jí)下滑菜單效果,涉及jquery鼠標(biāo)hover事件及show與hide操作頁面元素的顯示與隱藏效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼,涉及jquery鼠標(biāo)click事件控制頁面class屬性動(dòng)態(tài)變換效果的切換技巧,非常美觀實(shí)用,需要的朋友可以參考下2015-08-08