如何使用Bootstrap 5和jQuery/原生JS实现按钮组状态跨多标签页共享

你遇到的问题核心有两点：

1. 重复ID冲突：两次加载相同的shared-btn-group.html，导致页面中存在多个相同ID的input元素，label的for属性绑定失效，后加载的第二个标签页的checked属性会覆盖第一个标签页的默认选中状态
2. 无状态同步机制：没有全局逻辑同步不同标签页下按钮组的选中状态

具体修改步骤 #

1. 调整shared-btn-group.html，消除ID冲突 #

移除固定ID和对应的for属性，将input放入label内部保证点击交互正常，同时给每个单选按钮添加value属性作为唯一标识：

<div class="btn-group">
  <label class="btn btn-outline-primary">
    <input type="radio" class="btn-check" name="shared-btn-group" value="button1" autocomplete="off" checked />
    B1
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" class="btn-check" name="shared-btn-group" value="button2" autocomplete="off" />
    B2
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" class="btn-check" name="shared-btn-group" value="button3" autocomplete="off" />
    B3
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" class="btn-check" name="shared-btn-group" value="button4" autocomplete="off" />
    B4
  </label>
</div>

2. 替换index.html中原有的JS逻辑，添加状态同步 #

调整加载顺序，等两个标签页的按钮组都加载完成后绑定同步事件，保证任意标签页下的按钮选中状态都会同步到所有标签页：

$(function(){
  // 先加载第一个标签页的按钮组
  $("#container-first").load("shared-btn-group.html", function() {
    // 第一个加载完成后再加载第二个，避免加载顺序导致的状态异常
    $("#container-second").load("shared-btn-group.html", function() {
      // 全部加载完成后初始化同步逻辑
      initBtnSync();
    });
  });

  function initBtnSync() {
    // 监听所有单选按钮的选中变化
    $('input[name="shared-btn-group"]').on('change', function() {
      // 获取当前选中的按钮值
      const selectedValue = $(this).val();
      // 同步所有标签页下同值的单选按钮为选中状态
      $('input[name="shared-btn-group"][value="'+ selectedValue +'"]').prop('checked', true);
    });

    // 初始同步默认选中状态，解决加载后两个标签页初始状态不一致的问题
    const defaultSelectVal = $('input[name="shared-btn-group"]:checked').first().val();
    $('input[name="shared-btn-group"][value="'+ defaultSelectVal +'"]').prop('checked', true);
  }
});

修改完成后，任意标签页下选中按钮，切换到另一个标签页时都会保持相同的选中状态。

内容的提问来源于stack exchange，提问作者David V.