如何实现单页面内多个关联单选表单的双向同步？

你的现有代码只在页面初始化时执行了一次同步操作，不会监听单选框的选择变化，所以选中新选项时无法触发同步。要实现双向同步，需要绑定单选框的change事件实时同步选中状态，同时处理页面加载时的初始同步。

完整实现代码 #

<!-- 示例HTML结构 -->
<div class="form-a">
  <label>
    <input type="radio" name="course-date" value="2024-05-01"> 5月1日
  </label>
  <label>
    <input type="radio" name="course-date" value="2024-05-02"> 5月2日
  </label>
</div>

<div class="form-b">
  <label>
    <input type="radio" name="course-date-2" value="2024-05-01"> 5月1日
  </label>
  <label>
    <input type="radio" name="course-date-2" value="2024-05-02"> 5月2日
  </label>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 初始化同步：页面加载时对齐两个表单的选中状态
function initSync() {
  // 从表单A同步到表单B
  const checkedValA = $('input[name="course-date"]:checked').val();
  if (checkedValA) {
    $(`input[name="course-date-2"][value="${checkedValA}"]`).prop('checked', true);
  }
  // 从表单B同步到表单A（避免页面加载时B已有选中项）
  const checkedValB = $('input[name="course-date-2"]:checked').val();
  if (checkedValB) {
    $(`input[name="course-date"][value="${checkedValB}"]`).prop('checked', true);
  }
}

// 绑定双向同步事件
function bindSyncEvents() {
  // 表单A选中变化时同步到表单B
  $('input[name="course-date"]').on('change', function() {
    $(`input[name="course-date-2"][value="${$(this).val()}"]`).prop('checked', true);
  });
  
  // 表单B选中变化时同步到表单A
  $('input[name="course-date-2"]').on('change', function() {
    $(`input[name="course-date"][value="${$(this).val()}"]`).prop('checked', true);
  });
}

// 页面就绪后执行初始化和绑定事件
$(document).ready(() => {
  initSync();
  bindSyncEvents();
});
</script>

关键注意点 #

• 用prop('checked', true)替代attr('checked', true)：单选框的选中状态是DOM属性，prop能正确反映实时状态，attr仅操作初始HTML属性，状态变化后会失效。
• 双向绑定change事件：确保任意一个表单的选项被选中时，另一个表单能实时同步。
• 初始化同步：处理页面加载时已存在的选中项，避免初始状态不一致。

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