js radio触发选中事件

// HTML部分
<input type="radio" name="example" id="option1" value="1">
<label for="option1">选项1</label>

<input type="radio" name="example" id="option2" value="2">
<label for="option2">选项2</label>

// JavaScript部分
document.querySelectorAll('input[name="example"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        if (this.checked) {
            console.log('选中的值是: ' + this.value);
            // 这里可以添加更多逻辑，例如根据选中值执行不同的操作
        }
    });
});

解释说明：

1. HTML部分：定义了两个单选按钮（radio），它们的name属性相同，表示它们属于同一组。每个单选按钮都有一个唯一的id和value。
2. JavaScript部分：
   • 使用document.querySelectorAll选择所有name为example的单选按钮。
   • 使用forEach遍历这些单选按钮，并为每个单选按钮添加一个change事件监听器。
   • 当用户选择某个单选按钮时，触发change事件，检查是否被选中（this.checked）。
   • 如果被选中，则在控制台输出选中的值（this.value）。你可以在这里添加更多的逻辑来处理选中后的操作。

这样就可以实现当用户点击单选按钮时触发相应的事件并获取选中的值。