正文

单选框默认选中值的JavaScript实现方法

/0 浏览量
0504

在网页开发中，单选框（radio button）是用户进行单选选择的一种常见控件。有时，我们可能需要在页面加载时让某个单选框默认选中。本文将详细介绍如何使用JavaScript实现单选框的默认选中功能。

基本原理

单选框的默认选中值通常通过以下步骤实现：

  1. 确定要默认选中的单选框的ID或name属性。
  2. 使用JavaScript获取该单选框元素。
  3. 设置该单选框的checked属性为true。

实现步骤

1. HTML结构

首先，我们需要创建一个单选框组，并为每个单选框指定一个唯一的id属性。以下是一个简单的HTML示例：

<form>
  <input type="radio" id="option1" name="options" value="Option 1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="options" value="Option 2">
  <label for="option2">Option 2</label><br>
  <input type="radio" id="option3" name="options" value="Option 3">
  <label for="option3">Option 3</label>
</form>

2. CSS样式（可选）

为了使页面更美观，我们可以为单选框添加一些CSS样式。这里我们使用Bootstrap框架提供的样式：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

3. JavaScript实现

接下来，我们将使用JavaScript来设置默认选中的单选框。以下是一个简单的JavaScript示例：

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // 获取要默认选中的单选框
    var defaultOption = document.getElementById("option2");
    // 设置该单选框的checked属性为true
    defaultOption.checked = true;
  });
</script>

这段代码首先监听DOMContentLoaded事件，确保在DOM元素加载完成后执行。然后，通过getElementById方法获取ID为option2的单选框元素，并设置其checked属性为true，使其默认选中。

4. 整合代码

将以上代码整合到HTML页面中，即可实现单选框的默认选中功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单选框默认选中值</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <form>
    <input type="radio" id="option1" name="options" value="Option 1">
    <label for="option1">Option 1</label><br>
    <input type="radio" id="option2" name="options" value="Option 2">
    <label for="option2">Option 2</label><br>
    <input type="radio" id="option3" name="options" value="Option 3">
    <label for="option3">Option 3</label>
  </form>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var defaultOption = document.getElementById("option2");
      defaultOption.checked = true;
    });
  </script>
</body>
</html>

现在，当你打开这个页面时，你会看到单选框“Option 2”默认被选中。

-- 展开阅读全文 --