如何使用JavaScript檢查單選按鈕是否被選中?


HTML中,單選按鈕允許開發者為一個選擇建立多個選項。使用者可以選擇任何一個選項,我們可以獲取其值並知道使用者從多個選項中選擇了哪個選項。

因此,檢查使用者選擇了哪個單選按鈕以瞭解他們在多個選項中的選擇非常重要。讓我們透過現實生活中的例子來理解它。當您填寫任何表格並要求選擇性別時,您可以看到他們給您三個選項,您只能選擇一個。

在本教程中,我們將學習兩種方法來使用JavaScript檢查單選按鈕是否被選中。

使用單選按鈕的checked屬性

我們可以使用各種方法在JavaScript中訪問單選按鈕元素。之後,我們可以使用它的checked屬性來檢查選中的單選按鈕是否被選中。如果checked屬性的值為true,則表示單選按鈕被選中;否則,它未被選中。

語法

使用者可以按照以下語法使用單選按鈕元素的checked屬性來檢查單選按鈕是否被選中。

<input type = "radio" name = "radio" value = "male" id = "radio1" > Male</input> 
<script>
   let radio1 = document.getElementById('radio1');
   if(radio1.checked){
      // radio1 is checked
   }
</script>

在上面的語法中,我們使用其id訪問了單選按鈕,並在if語句中使用了checked屬性來檢查單選按鈕是否被選中。

示例

在下面的示例中,我們建立了三個單選按鈕,包含不同的值,例如男性、女性和其他。在JavaScript中,我們透過其id訪問每個單選按鈕,並檢查每個單選按鈕的“checked”屬性的值。

當用戶選擇任何單選按鈕並單擊按鈕時,他們會看到一條訊息,顯示所選單選按鈕的值。

<html>
<body>
   <h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected.</h3>
   <input type = "radio" name = "radio" value = "male" id = "radio1" > Male </input> <br>
   <input type = "radio" name = "radio" value = "female" id = "radio2" > Female </input><br>
   <input type = "radio" name = "radio" value = "other" id = "radio3" /> Other </input>
   <p id = "output"> </p>
   <button onclick = "checkRadio()"> Check radio </button>
   <script>
      let output = document.getElementById("output");
      function checkRadio(){
         // accessing the radio buttons
         let radio1 = document.getElementById('radio1');
         let radio2 = document.getElementById('radio2');
         let radio3 = document.getElementById('radio3');
         // checking if any radio button is selected
         if(radio1.checked){
            output.innerHTML = "The radio button with value " + radio1.value + " is checked!";
         }
         if(radio2.checked){
            output.innerHTML = "The radio button with value " + radio2.value + " is checked!";
         }
         if(radio3.checked){
            output.innerHTML = "The radio button with value " + radio3.value + " is checked!";
         }
      }
   </script>
</body>
</html>

示例

下面的示例與上面的示例幾乎相同,但不同之處在於我們一次性使用它們的名稱訪問所有單選按鈕。getElementByName()方法返回所有名為radio的單選按鈕元素。

之後,我們使用for-of迴圈遍歷單選按鈕陣列,並使用“checked”屬性檢查每個單選按鈕是否被選中。

<html>
<body>
   <h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected</h3>
   <input type = "radio" name = "radio" value = "10" id = "radio1"> 10 </input> <br>
   <input type = "radio" name = "radio" value = "20" id = "radio2"> 20 </input> <br>
   <input type = "radio" name = "radio" value = "30" id = "radio3" /> 30 </input>
   <p id = "output"> </p>
   <button onclick = "getSelectedRadio()"> Check radio </button>
   <script>
      let output = document.getElementById("output");
      function getSelectedRadio() {
         let radioButtons = document.getElementsByName('radio');
         for (let radio of radioButtons) {
            if (radio.checked) {
               output.innerHTML = "The radio button is selected and it's value is " + radio.value;
            }
         }
      }
   </script>
</body>
</html>

使用querySelector()方法檢查單選按鈕是否被選中

程式設計師可以使用JavaScript的querySelector()方法來選擇任何HTML元素。在這裡,我們使用了querySelector()方法來僅選擇選中的單選按鈕。如果沒有選中任何單選按鈕,則返回null值。

語法

使用者可以按照以下語法使用querySelector()方法來檢查單選按鈕是否被選中。

var selected = document.querySelector('input[name="year"]:checked');

在上面的語法中,“year”是單選按鈕組的名稱,它返回屬於“year”組且被選中的任何單選按鈕。

示例

在下面的示例中,我們建立了三個單選按鈕,為使用者提供三個不同的選擇。當用戶點選“檢查所選年份”按鈕時,它會呼叫getSelectedRadio()函式,該函式使用querySelector()方法從DOM中選擇名稱為“year”且被選中的單選按鈕。

使用者可以不選擇任何單選按鈕就點選按鈕,並觀察輸出。

<html>
<body>
   <h3>Using the <i> querySelector() method </i> to check whether a radio button is selected.</h3>
   <input type = "radio" name = "year" value = "1999" id = "radio1"> 1999 </input><br>
   <input type = "radio" name = "year" value = "2021" id = "radio2"> 2021 </input><br>
   <input type = "radio" name = "year" value = "2001" id = "radio3" /> 2001 </input>
   <p id="output"></p>
   <button onclick="getSelectedRadio()">Check selected year</button>
   <script>
      let output = document.getElementById("output");
      function getSelectedRadio() {
         var selected = document.querySelector(
         'input[name="year"]:checked');
         if (selected) {
            output.innerHTML += "Radio button is selected."
         } else {
            output.innerHTML += "Not any radio button is selected!"
         }
      }
   </script>
</body>
</html>

使用者學習了兩種使用JavaScript獲取選中的單選按鈕的不同方法。最好的方法是使用querySelector()方法,因為我們只需要編寫一行程式碼。

更新於:2023年10月7日

34K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告