如何在 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+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告