jQuery 擷取多選框的值及多選框中文的函數，jquery多選

jQuery 擷取多選框的值及多選框中文的函數，jquery多選

 DOM結構

我的多選框的dom結構,都是下面這種的.都是基礎知識,不做過多闡述.

<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>

使用這種方法的優點是,點擊文字就可以選擇多選框了.並且可以使用CSS來美化整個樣式.

JS代碼

返回已經選中的多選框的值函數

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

通過這個函數,可以按照我們的需要,返回相應name值的多選框選中的項目的值,以1,2,3的方式返回

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

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

可能和我使用的是 jquery2.0的版本有關係,但具體是什麼原因,我沒有深究.

返回已經選中的多選框的項目名稱

如上,可能我需要返回的是甘肅,青海,陝西,寧夏這樣的項目名.當然,這個也是可以做到的.

不過,這個嚴重依賴我上面的DOM結構,如果結構不相同的話,需要做適當的修改的.

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

總結

網上搜尋來的代碼不一定都是正確的.但大體思路應該不會錯.

其中的差異可能是標點符號(中英文)\縮排(中文全形空格)\或者是使用的JQ版本不相同.

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

以上所述是小編給大家介紹的jQuery 擷取多選框的值及多選框中文的函數的相關知識，希望能夠協助到大家。