# 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**](http://www.w3schools.com/jsref/jsref_undefined.asp) 喔，也因此建議各位在撰寫取得多選下拉選單的值時可以運用上述技巧，當無回傳值時也回傳一個空的陣列，以避免程式因為誤判為陣列而導致 JavaScript 發生例外狀況！

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

多個 radio 會共用一個欄位名稱，同名的 radio 項目只會有一個被選中，因此可以透過 [**:checked**](http://api.jquery.com/checked) 選取器幫我們選出被使用者選取的項目，如下範例：

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

注意：如果沒有任何一項被點選的話，上述程式回傳的型別會是 [**undefined**](http://www.w3schools.com/jsref/jsref_undefined.asp) 喔！

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

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

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

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

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

另一個寫法是透過 [.map()](http://api.jquery.com/map) 將回傳值轉譯成為另一種陣列，如下：

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

另外還有一種解法，就是透過 [jQuery Batch Plugin](https://github.com/brandonaaron/jquery.batch) 來取值，載入這個 Plugin 後，程式碼變成如下：

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

**注意事項** 

-   以上範例主要目的是用來示範取得表單元素值的方法
-   範例中使用 HTML 屬性 (Attribute) 選取器 (Selector) 來取得物件的方式較沒效率，如果可以設定 id 屬性的話，建議使用 **$('#fieldname')** 的方式取得該欄位的 jQuery 物件。
-   當網頁上擁有超過一個表單時，不應該使用這種方法取得欄位資料。建議多加上表單的選取器區別不同的表單欄位，例如：**$('#form1 input:radio:checked#fieldname')**

**相關連結**

-   [.val()](http://api.jquery.com/val/)
-   [.get()](http://api.jquery.com/get/)
-   [.map()](http://api.jquery.com/map)
-   [.each()](http://api.jquery.com/each)
-   [:selected Selector](http://api.jquery.com/selected-selector/)
-   [:checked Selector](http://api.jquery.com/checked-selector/)
-   [jQuery Batch Plugin](https://github.com/brandonaaron/jquery.batch)
-   [這是我在 jsFiddle 上的實驗紀錄](http://jsfiddle.net/BtLqj/3/)
-   [jQuery Fundamentals](http://jqfundamentals.com/book/index.html)