如何实现单选框与列表项绑定：当<a>标签含active show类时选中关联单选框

原生JavaScript实现 #

以下代码可覆盖页面初始加载和标签切换两种场景：

// 页面加载完成后，设置已激活标签对应的单选按钮
document.querySelectorAll('a.nav-link.active.show').forEach(activeLink => {
  const radio = activeLink.closest('.nav-item').querySelector('input[type="radio"]');
  if (radio) radio.checked = true;
});

// 监听Bootstrap标签切换事件，切换后更新单选按钮状态
document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(link => {
  link.addEventListener('shown.bs.tab', function() {
    // 取消同组单选按钮选中状态（需保证单选按钮name属性统一）
    const currentRadio = this.closest('.nav-item').querySelector('input[type="radio"]');
    if (currentRadio) {
      document.querySelectorAll(`input[name="${currentRadio.name}"]`).forEach(radio => {
        radio.checked = false;
      });
      currentRadio.checked = true;
    }
  });
});

jQuery实现 #

若项目使用jQuery，代码会更简洁：

// 初始加载时同步状态
$('a.nav-link.active.show').each(function() {
  $(this).closest('.nav-item').find('input[type="radio"]').prop('checked', true);
});

// 监听标签切换事件
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
  const currentRadio = $(this).closest('.nav-item').find('input[type="radio"]');
  if (currentRadio.length) {
    $(`input[name="${currentRadio.attr('name')}"]`).prop('checked', false);
    currentRadio.prop('checked', true);
  }
});

重要提示 #

• 示例中单选按钮的name属性各不相同，这会导致它们无法互斥选择，建议统一为同一个name值（比如tab_group），才符合单选按钮的交互逻辑。
• 代码依赖Bootstrap的标签切换事件shown.bs.tab，需确保项目已正确引入Bootstrap JS文件。

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