js radio触发选中事件|极客笔记

js radio触发选中事件

在网页中，radio按钮是常用的表单元素之一，通常用于用户在一组选项中选择一个选项。当用户选择某个radio按钮时，我们常常需要触发一些相应的事件，比如显示相关内容、执行特定操作等。本文将详细介绍如何使用JavaScript来实现radio按钮的选中事件触发。

HTML结构

首先，我们先来看一下一个简单的包含radio按钮的HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>Radio按钮触发事件示例</title>
</head>
<body>
    <input type="radio" name="color" value="red" id="red"> 红色
    <input type="radio" name="color" value="blue" id="blue"> 蓝色
    <input type="radio" name="color" value="green" id="green"> 绿色

    <div id="result"></div>
</body>
</html>

以上代码中，我们创建了三个radio按钮，分别表示红色、蓝色和绿色，每个按钮的value值分别对应相应颜色的英文单词。同时，我们在页面中放置了一个空的<div>元素，用于显示选中的颜色。

JavaScript事件监听

接下来，我们使用JavaScript来监听radio按钮的选中事件，并根据选中的值来做出相应的处理。

document.querySelectorAll('input[type=radio]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        let color = document.querySelector('input[name="color"]:checked').value;
        document.getElementById('result').innerText = '你选择的颜色是：' + color;
    });
});

在以上代码中，我们首先使用querySelectorAll方法选中所有的radio按钮，然后通过forEach方法对每个radio按钮添加change事件监听器。当某个radio按钮被选中时，触发change事件的回调函数，我们通过querySelector方法找到当前被选中的radio按钮，并获取其value值，然后将选中的颜色显示在页面上。