使用jQuery獲取Radio Button的值

一、為什麼需要獲取Radio Button的值

在網頁開發中，Radio Button是一種常用的表單控制項，它通常用於讓用戶選擇一項或多項選項。但在開發中，我們可能需要獲取用戶所選的選項，以便後續進行相關操作。

舉個例子，比如我們開發了一個調查問卷，其中某個問題的選項是單選的Radio Button，當用戶選擇完成並點擊提交按鈕後，我們需要獲取這個問題的選項值，以便後續進行相關的統計和分析。

二、使用jQuery獲取Radio Button的值示例

接下來，我們將通過一個簡單的示例來演示如何使用jQuery獲取Radio Button的值。

假設我們有一個包含三個選項的單選Radio Button，HTML代碼如下：

<input type="radio" name="radio" value="1">選項1
<input type="radio" name="radio" value="2">選項2
<input type="radio" name="radio" value="3">選項3

我們需要獲取用戶所選的選項值，可以通過以下jQuery代碼來實現：

var selectedValue = $('input[name="radio"]:checked').val();
console.log(selectedValue);

其中，input[name="radio"]表示選取所有name屬性為radio的標籤；:checked表示選取所有被選中的Radio Button；.val()方法表示獲取選中Radio Button的值。

三、獲取多個Radio Button的值

在實際開發中，我們可能需要獲取多個Radio Button的值，可能是同一組中的多個選項，也可能是不同組中的多個選項。這時，我們可以通過以下jQuery代碼來獲取所有選中的Radio Button的值：

var selectedValues = [];
$('input[type="radio"]:checked').each(function() {
  selectedValues.push($(this).val());
});
console.log(selectedValues);

其中，input[type="radio"]表示選取所有標籤中type屬性值為radio的標籤；.each()方法表示遍歷選中的Radio Button；$(this).val()表示獲取當前遍歷到的Radio Button的值，並將其添加到selectedValues數組中。

四、總結

使用jQuery獲取Radio Button的值並不難，只需要掌握上述方法便可輕鬆實現。當然，在實際開發中，具體代碼可能會因需求的不同而略有差異，但核心思路是相通的。