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

 

相關連結