如何通过点击文档中的链接激活Radio Button？

方法一：纯HTML原生实现（利用label标签） #

借助HTML的label标签特性，将需要点击的文本（模拟链接样式）与radio按钮关联，无需JavaScript即可实现点击激活：

<input type="radio" name="choice" id="choice1">
<label for="choice1" style="color: #0066cc; text-decoration: underline; cursor: pointer;">点击激活选项1</label>

<input type="radio" name="choice" id="choice2">
<label for="choice2" style="color: #0066cc; text-decoration: underline; cursor: pointer;">点击激活选项2</label>

• 原理：label的for属性值对应radio按钮的id，点击label内的任意内容都会触发radio的选中状态
• 样式说明：通过内联样式让label看起来和普通链接一致，也可以用外部CSS统一设置

方法二：JavaScript绑定事件（适配已有链接场景） #

如果页面已有<a>标签，需要通过点击链接激活radio，可通过添加点击事件实现：

单个链接与radio的绑定 #

<input type="radio" name="choice" id="choice3">
<a href="#" id="link-to-choice3">点击激活选项3</a>

<script>
document.getElementById('link-to-choice3').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止链接默认跳转行为
    document.getElementById('choice3').checked = true; // 激活目标radio
});
</script>

批量处理多个链接与radio #

如果有大量链接和radio需要配对，用data-*属性批量绑定更高效：

<input type="radio" name="choice" id="choice4">
<a href="#" class="radio-activator" data-target="choice4">点击激活选项4</a>

<input type="radio" name="choice" id="choice5">
<a href="#" class="radio-activator" data-target="choice5">点击激活选项5</a>

<script>
document.querySelectorAll('.radio-activator').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetRadio = document.getElementById(this.dataset.target);
        if (targetRadio) targetRadio.checked = true;
    });
});
</script>

内容的提问来源于stack exchange，提问作者Chris