如何使用Pug与JavaScript根据单选按钮选中值动态修改a标签href

首先要修正原有Pug代码的逻辑问题：两个单选按钮name属性值不一致会导致选项可以同时选中，无法实现单选互斥，需要先统一分组，再绑定交互事件，具体操作如下：

• 调整Pug模板结构
  给a标签加唯一id方便JS获取，把两个单选按钮的name属性设为同一个值归为同一单选组，同时给每个单选按钮加value属性存储对应的跳转地址，修正后的代码：

// 目标a标签，默认href保持#即可
a#targetLink(href="#") Link

// 统一name为linkSelect实现单选互斥，对应地址存在value属性中
input(type="radio", name="linkSelect", value="http://www.domain1.com")
|  Link 1
input(type="radio", name="linkSelect", value="http://www.domain2.com")
|  Link 2

• 编写JS交互逻辑
  监听单选按钮的选中状态变化，选中时把a标签的href替换成当前选项对应的地址即可，代码可以直接放在Pug的script标签块中：

// 获取页面元素
const link = document.querySelector('#targetLink')
const radios = document.querySelectorAll('input[name="linkSelect"]')

// 给每个单选按钮绑定选中变化事件
radios.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      link.href = this.value
    }
  })
})

说明：初始状态下a标签已经自带href="#"，不需要额外写初始化赋值逻辑，上述代码已经完全满足需求：选中Link1时链接切到对应地址1，选中Link2时切到对应地址2，未选中时保持默认的#。

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