JS实现radio选中功能|极客笔记

JS实现radio选中功能

在网页开发过程中，经常会遇到需要使用radio按钮来实现单选功能的场景。通过JavaScript可以很方便地控制radio按钮的选中状态，从而实现一些交互效果。本文将介绍如何使用JavaScript来实现radio按钮的选中功能。

HTML结构

首先，我们需要在HTML中定义几个radio按钮，以便后续通过JavaScript来控制它们的选中状态。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio选中</title>
</head>
<body>
    <label><input type="radio" name="gender" value="male"> 男</label>
    <label><input type="radio" name="gender" value="female"> 女</label>
    <label><input type="radio" name="gender" value="other"> 其他</label>
</body>
</html>

以上代码中定义了三个radio按钮，它们的name属性都是”gender”，这样它们就可以实现单选功能。我们可以通过JavaScript代码来实现radio按钮的选中效果。

JavaScript实现

下面是使用JavaScript实现radio按钮选中功能的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio选中</title>
</head>
<body>
    <label><input type="radio" name="gender" value="male" id="male"> 男</label>
    <label><input type="radio" name="gender" value="female" id="female"> 女</label>
    <label><input type="radio" name="gender" value="other" id="other"> 其他</label>

    <script>
        // 假设我们想要选中“女”这个选项
        document.getElementById('female').checked = true;
    </script>
</body>
</html>

在以上代码中，我们给每个radio按钮添加了一个id属性，方便通过JavaScript来访问它们。在script标签中，我们使用document.getElementById()方法来获取id为”female”的radio按钮，并将其选中状态设置为true，从而实现了默认选中“女”这个选项。