JS设置radio选中|极客笔记

JS设置radio选中

在web开发中，经常会遇到需要通过JavaScript来操作页面上的各种元素的需求，其中包括设置和获取radio按钮的选中状态。本文将详细介绍如何使用JavaScript来设置radio按钮的选中状态。

什么是radio按钮

radio按钮是一种常见的表单元素，它允许用户在多个选项中选择一个。不同于checkbox按钮可以选择多个选项，radio按钮只能选择其中的一个选项。

在HTML中，radio按钮通过<input>元素来实现，其type属性的值为”radio”。当多个radio按钮拥有相同的name属性时，它们将成为一个单选组，用户只能从中选择一个选项。

以下是一个简单的HTML示例，展示了如何创建两个radio按钮并将它们放置在同一个单选组中：

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

在这个示例中，name属性的值为”gender”，因此这两个radio按钮属于同一个单选组，用户只能选择其中之一。

使用JavaScript设置radio选中

要使用JavaScript来设置radio按钮的选中状态，我们需要获取到对应的radio元素，并为其设置checked属性为true。以下是一种简单的方法：

// 获取radio元素
var maleRadio = document.querySelector('input[name="gender"][value="male"]');

// 设置选中状态为true
maleRadio.checked = true;

在这个示例中，我们首先通过document.querySelector()方法获取到name属性值为”gender”、value属性值为”male”的radio元素，然后将其checked属性设置为true，从而实现了默认选中”Male”选项的效果。

当需要设置其他radio按钮选中时，只需要相应地修改value属性值即可。例如，要设置”Female”选项为默认选中状态，只需将上述代码中的value属性值修改为”female”即可。

示例代码及运行结果

接下来，我们将通过一个完整的示例代码来展示如何使用JavaScript来设置radio按钮的选中状态，并运行该示例代码来验证其效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set Radio Checked</title>
</head>
<body>

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<script>
// 获取radio元素
var maleRadio = document.querySelector('input[name="gender"][value="male"]');
var femaleRadio = document.querySelector('input[name="gender"][value="female"]');

// 设置选中状态
maleRadio.checked = true; // 默认选中Male

// 模拟点击事件
setTimeout(function() {
  femaleRadio.checked = true; // 点击后选中Female
}, 2000);

</script>
</body>
</html>

在这个示例代码中，我们创建了两个radio按钮，分别代表”Male”和”Female”选项。我们首先将”Male”选项设置为默认选中状态，然后通过setTimeout()函数延迟2秒模拟点击事件，将”Female”选项设为选中状态。

在浏览器中打开以上代码，并观察页面上的radio按钮，你会发现最开始”Male”选项被选中，2秒后自动切换到”Female”选项。

通过以上示例，我们成功地演示了如何使用JavaScript来设置radio按钮的选中状态，同时了解了操作radio按钮的基本方法和原理。