[JQuery] 取得表單資料、單選 Radio 與多選 Che

透過 jQuery 取得 HTML 表單資料其實不難，但每次遇到要取得 Radio 單選選項的選取值與 Checkbox 多選的選取值都要花些時間查詢取值的方法，網路上能搜尋到的方法也大多是舊版 jQuery 的語法已經不適用了，因此特別撰文筆記一下，也順便把取得各式 HTML 表單欄位的方法做個整理。

1. 取得文字欄位內容的方法 ( text, textarea, password )

$('input[name="firstname"]').val();

2. 取得（單選）下拉選單的方法 ( select )

$('select[name="cars1"]').val();

3. 取得（多選）下拉選項的方法 ( select multiple )

取得多選的下拉選單在 jQuery 裡面還算簡單，用法跟單選的下拉選單差不多，唯一需要注意的是回傳的型別不再是字串，而是一個字串陣列，即便你選中的只有一個，回傳的型別依然是個陣列，如下範例：

var selectedValues = $('select[name="cars2"]').val() || [];

注意：如果沒有任何一項被點選的話，上述程式回傳的型別會是 undefined 喔，也因此建議各位在撰寫取得多選下拉選單的值時可以運用上述技巧，當無回傳值時也回傳一個空的陣列，以避免程式因為誤判為陣列而導致 JavaScript 發生例外狀況！

4. 取得（單選）選項的方法 ( radio )

多個 radio 會共用一個欄位名稱，同名的 radio 項目只會有一個被選中，因此可以透過 :checked 選取器幫我們選出被使用者選取的項目，如下範例：

$('input:radio:checked[name="gender"]').val();

注意：如果沒有任何一項被點選的話，上述程式回傳的型別會是 undefined 喔！

5. 取得（多選）選項的方法 ( checkbox )

這方法就麻煩了些，因為 Checkbox 是可以多選的，而且這些多選的選項都擁有相同的欄位名稱，而 jQuery 對於處理 checkbox 的方式並不像 多選下拉選單 (select multiple) 直接回傳陣列那樣直覺，如果你用以下程式碼撰寫程式，得到的將只會有「第一個勾選項目」的值，並非所有勾選項目的完整內容！

( 以下為錯誤示範，切勿照抄!! )

$('input:checkbox:checked[name="vehicle"]').val();

若你想取得所有勾選項目值為一個陣列，寫法稍微複雜一些些，第一種寫法要先定義好一個陣列再透過 .each() 取值：

var cbxVehicle = new Array();
$('input:checkbox:checked[name="vehicle"]').each(function(i) { cbxVehicle[i] = this.value; });

另一個寫法是透過 .map() 將回傳值轉譯成為另一種陣列，如下：

$('input:checkbox:checked[name="vehicle"]').map(function() { return $(this).val(); }).get();

另外還有一種解法，就是透過 jQuery Batch Plugin 來取值，載入這個 Plugin 後，程式碼變成如下：

$('input:checkbox:checked[name="vehicle"]').vals()

注意事項 

• 以上範例主要目的是用來示範取得表單元素值的方法


• 範例中使用 HTML 屬性 (Attribute) 選取器 (Selector) 來取得物件的方式較沒效率，如果可以設定 id 屬性的話，建議使用 $('#fieldname') 的方式取得該欄位的 jQuery 物件。


• 當網頁上擁有超過一個表單時，不應該使用這種方法取得欄位資料。建議多加上表單的選取器區別不同的表單欄位，例如：$('#form1 input:radio:checked#fieldname')

相關連結

• .val()


• .get()


• .map()


• .each()


• :selected Selector


• :checked Selector


• jQuery Batch Plugin


• 這是我在 jsFiddle 上的實驗紀錄


• jQuery Fundamentals

http://blog.miniasp.com/post/2011/04/26/jQuery-get-form-value-Checkbox-Radio.aspx