The Will Will Web | jQuery 取得表單資料、單選 Radio 與多選 Checkbox 的方法

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

jQuery 取得表單資料、單選 Radio 與多選 Checkbox 的方法

透過 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')

 

相關連結