如何在 JavaScript 中預設選中單選按鈕？

單選按鈕

單選按鈕用於從多個選項中選擇**一個**。這是 HTML 中的一個元素。單選按鈕是一個單選按鈕組，用於顯示一組多個選項，並且其中只能選擇一個。這種方式與複選框非常相似，在複選框的情況下，我們可以根據需要選擇一個或多個選項，而在單選按鈕中，則無法選擇多個選項。我們可以使用 <input> 標籤在 HTML 中定義單選按鈕。

以下是定義 HTML 中單選按鈕的語法

<input type="radio">

示例 1

預設未選中

如果需要預設選中一個單選按鈕，則需要將其選中設定為**true**。當單選按鈕被選中設定為 true 時，它將預設**自動聚焦**。

考慮下面的示例，我們有三個單選按鈕，並且沒有一個**自動聚焦**。在執行下面的指令碼後，我們得到預設未選中，因為它們都不**自動聚焦**

<!DOCTYPE html>
<html>
<body>
   <input id="radio_1" value="1" type="radio" name="check"/>Male
   <input id="radio_2" value="2" type="radio" name="check"/>Female
   <input id="radio_3" value="3" type="radio" name="check"/>Not to mention
</body>
</html>

示例 2

選擇一個按鈕

在這個例子中，我們將選擇一個按鈕並將其標記為 true，這將允許我們使該按鈕成為預設按鈕。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Select a radio button by default</title>
   <input id="radioButton1" type="radio" name="check" />Hyderabad
   <input id="radioButton2" type="radio" name="check" />Delhi
   <input id="radioButton3" type="radio" name="check" />Mumbai
</head>
<body>
   <script>
      let radBtnDefault = document.getElementById("radioButton1");
      radBtnDefault.checked = true;
   </script>
</body>
</html>

示例 3

在下面的例子中，我們有三個單選按鈕。在初始階段，我們需要選中單選按鈕以**自動聚焦**。

為此，我們需要獲取要分配**自動聚焦**的特定單選按鈕的**id**，並將其選中設定為 true。在執行下面的指令碼後，它將輸出預設選擇**次要**單選按鈕，因為我們將其選中設定為 true。

<!DOCTYPE html>
<html>
<body>
   <form id="radio_btn_form" name="form">
      <input id="radio_1" value="1" type="radio" name="check"/>Minor
      <input id="radio_2" value="2" type="radio" name="check"/>Major
      <input id="radio_3" value="3" type="radio" name="check"/>senior citizen
   </form>
   <script>
      radiobutton = document.getElementById("radio_1");
      radiobutton.checked = true;
   </script>
</body>
</html>

示例 4

使用“預設選中”屬性

在下面的示例中，它說明單選按鈕是否預設被選中。這可以透過使用“.defaultChecked”分配給 .getElementById 來實現。輸出將以布林值顯示。

<!DOCTYPE html>
<html>
<body>
   <input type="radio" name="name" id="myRadio_1" checked> Radio Button-1
   <p>Click on "Tap to check" button below know whether the radio button is by default checked.</p>
   <button onclick="func()">Tap to check!</button>
   <p id="para"></p>
   <script>
      function func() {
         var a = document.getElementById("myRadio_1").defaultChecked;
         document.getElementById("para").innerHTML = a;
      }
   </script>
</body>
</html>

點選“點選檢查”按鈕後，它將顯示單選按鈕是否預設被選中。

更新於: 2022年9月19日

13K+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告