一、基礎(chǔ)概念

在HTML中，有時(shí)需要用戶選擇一個(gè)值作為輸入。一種常見的做法是使用radio按鈕。如下所示：

  
  男性  
  
  女性  
  
  其他

以上代碼展示了三個(gè)radio按鈕，它們都有相同的name屬性，并且有不同的value屬性。這意味著用戶只能在它們之間做出唯一的選擇。

獲取radio選中的值，實(shí)際上就是獲取被選中的radio按鈕的value屬性。

二、使用JavaScript獲取選中的值

可以使用JavaScript來(lái)獲取radio選中的值。其中一個(gè)常見的方法是使用document.getElementsByName()，接著遍歷這些元素，檢查是否checked屬性為真。如下所示：

在以上代碼中，我們首先使用document.getElementsByName()獲取了所有name為gender的元素。接著，遍歷所有的元素，在找到被選中的元素后，使用其value屬性賦值給變量selectedValue。

三、使用jQuery獲取選中的值

如果您正在使用jQuery，獲取radio選中的值會(huì)變得更加容易。您可以使用jQuery的選擇器來(lái)獲取所有的被選中的radio按鈕，并且使用val()方法獲取選中的值。如下所示：

在以上代碼中，$()是jQuery的選擇器。我們使用了選擇器input[name="gender"]:checked來(lái)獲取所有name為gender且被選中的元素。接著，使用val()方法獲取選中的值并將其賦值給變量selectedValue。

四、使用Vue.js獲取選中的值

如果您正在使用Vue.js，您可以使用v-model指令來(lái)輕松地獲取radio選中的值。如下所示：

  
  男性  
  
  女性  
  
  其他
  
選中的值是：{{ selectedValue }}

在以上代碼中，我們使用了v-model指令將radio按鈕與Vue組件的selectedValue屬性綁定在一起。每當(dāng)用戶選擇不同的選項(xiàng)時(shí)，Vue會(huì)自動(dòng)更新selectedValue屬性，并且將其反映到頁(yè)面上。

五、總結(jié)

本文從基礎(chǔ)概念開始，闡述了如何獲取radio選中的值。我們介紹了使用JavaScript、jQuery和Vue.js三種不同的方法，希望能夠幫助讀者更好地理解如何獲取radio選中的值。