透過 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')
相關連結