本教程旨在解决同一HTML表单中，两个或多个视觉上独立的单选按钮组之间的数据同步问题。通过利用JavaScript的事件委托机制，我们能够实现当一个组中的单选按钮被选中时，另一个组中对应值的单选按钮也自动更新选中状态，确保用户选择的一致性，提升表单交互体验。
引言：多位置单选按钮组的同步需求
在复杂的Web表单设计中，我们有时会遇到这样的场景：需要在表单的不同区域或步骤中展示相同的用户选项，例如，一个“人数选择”的单选按钮组可能在表单顶部和底部都出现。用户在任何一个位置做出选择时，我们期望另一个位置的对应选项也能自动同步更新，以保持数据一致性，避免用户重复选择，并优化整体的用户体验。
然而，HTML原生的单选按钮（radio input）特性是：只要它们拥有相同的name属性，在整个表单中就只能选中其中一个。如果两个视觉上独立的单选按钮组都使用相同的name属性，它们将作为一个整体运作，无法实现独立的视觉呈现和联动。本教程将详细介绍如何通过合理的HTML结构和JavaScript事件处理，实现两个或多个单选按钮组之间的双向联动同步。
HTML结构设计
要实现单选按钮组的联动，首先需要对HTML结构进行精心设计。关键在于将每个单选按钮组包裹在独立的容器中，并为每个组内的单选按钮赋予不同的name属性，以确保它们在各自的容器内互斥，但在不同容器之间则保持独立。
- 独立的容器： 为每个单选按钮组创建一个独立的父容器，例如一个div元素，并赋予其唯一的id。这将便于我们通过JavaScript准确地获取和操作这些组。
- 组内name属性： 在每个独立的容器内部，所有单选按钮应共享相同的name属性，以确保在该组内只能选择一个选项。
- 组间name属性差异： 至关重要的一点是，不同容器（即不同视觉组）中的单选按钮必须使用不同的name属性。 例如，第一个组可以使用name="number_people"，第二个组可以使用name="number_people2"。这样，浏览器就不会将它们视为一个全局的单选组，从而允许我们通过JavaScript进行独立的控制和同步。
以下是相应的HTML结构示例：
<div id="group-one">
<p>第一组</p>
<label class="n_people radio-inline">1
<input type="radio" name="number_people" value="1"><span class="checkmark"></span>
</label>
<label class="n_people radio-inline">2
<input type="radio" name="number_people" value="2"><span class="checkmark"></span>
</label>
<label class="n_people radio-inline">3
<input type="radio" name="number_people" value="3"><span class="checkmark"></span>
</label>
<label class="n_people radio-inline">4
<input type="radio" name="number_people" value="4" checked><span class="checkmark"></span>
</label>
</div>
<br><div id="group-two">
<p>第二组</p>
<label class="n_people radio-inline">1
<input type="radio" name="number_people2" value="1"><span class="checkmark"></span>
</label>
<label class="n_people radio-inline">2
<input type="radio" name="number_people2" value="2"><span class="checkmark"></span>
</label>
<label class="n_people radio-inline">3
<input type="radio" name="number_people2" value="3"><span class="checkmark"></span>
</label>
<label class="n_people radio-inline">4
<input type="radio" name="number_people2" value="4" checked><span class="checkmark"></span>
</label>
</div>
在这个示例中，group-one和group-two是两个独立的容器。group-one中的单选按钮name属性为number_people，而group-two中的单选按钮name属性为number_people2。
JavaScript同步逻辑实现
有了正确的HTML结构，我们就可以利用JavaScript来监听用户操作并实现联动同步。核心思路是为每个单选按钮组的父容器添加change事件监听器，并通过事件委托捕获组内任何单选按钮的变化，然后根据变化的值去更新另一个组的选中状态。
// 获取两个单选按钮组的容器元素
const groupOne = document.getElementById('group-one');
const groupTwo = document.getElementById('group-two');
/**
* 这是一个通用的函数，用于在两个单选按钮组之间建立同步关系。
* 当 groupA 中的单选按钮状态改变时，它会更新 groupB 中对应值的单选按钮。
* @param {HTMLElement} groupA - 触发改变事件的单选按钮组的容器元素。
* @param {HTMLElement} groupB - 需要被同步更新的单选按钮组的容器元素。
*/
const changeGroup = (groupA, groupB) => {
groupA.addEventListener('change', (e) => {
// 确保事件是由一个单选按钮触发的
if (e.target.type === 'radio') {
// 获取当前选中的单选按钮的值
const selectedValue = e.target.value;
// 在另一个组中查找具有相同值的单选按钮，并将其选中
const targetRadio = groupB.querySelector(`input[type="radio"][value="${selectedValue}"]`);
if (targetRadio) {
targetRadio.checked = true;
}
}
});
};
// 建立双向同步：
// 当第一组改变时，更新第二组
changeGroup(groupOne, groupTwo);
// 当第二组改变时，更新第一组
changeGroup(groupTwo, groupOne);
代码解析与注意事项
- document.getElementById()： 这是获取特定DOM元素（通过其id属性）的标准方法。我们用它来获取两个单选按钮组的父容器。
- addEventListener('change', ...)： 我们将change事件监听器附加到父容器（groupOne和groupTwo）上。当容器内的任何input元素的change事件冒泡到父容器时，监听器就会被触发。这种方式称为事件委托，它比为每个单选按钮单独添加监听器更高效，尤其是在元素数量较多或动态生成时。
- e.target： 在事件处理函数中，e.target指向实际触发事件的DOM元素。在这里，它将是用户点击的那个input type="radio"元素。
- e.target.value： 获取被选中单选按钮的value属性。这个值是我们在两个组之间进行同步的依据。
- groupB.querySelector(input[type="radio"][value="${selectedValue}"])： 这是关键的查找操作。querySelector()方法在groupB容器内查找第一个匹配指定CSS选择器的元素。选择器input[type="radio"][value="${selectedValue}"]精确地定位到groupB中type为radio且value属性与selectedValue相同的那个单选按钮。
- targetRadio.checked = true;： 一旦找到对应的单选按钮，我们就将其checked属性设置为true，从而实现选中状态的同步。
- 双向同步： 代码中调用了两次changeGroup函数：changeGroup(groupOne, groupTwo)和changeGroup(groupTwo, groupOne)。这确保了无论用户在哪一组中做出选择，另一组都能相应地更新，实现了真正的双向联动。
- name属性的重要性： 再次强调，不同组的单选按钮必须使用不同的name属性。如果它们使用相同的name，浏览器会强制它们全局互斥，导致JavaScript的同步逻辑失效，因为浏览器会优先处理其默认行为。
- 可扩展性： 这种模式可以很容易地扩展到三个或更多单选按钮组的同步。只需为每个组创建独立的容器和不同的name属性，然后为每对需要同步的组调用changeGroup函数即可。
总结
通过本教程，我们学习了如何在同一HTML表单中实现多位置单选按钮组的联动同步。核心方法包括：为每个组设计独立的HTML容器并赋予唯一的ID；确保组内单选按钮name属性一致，但组间name属性不同；最后，利用JavaScript的事件委托机制，监听组容器的change事件，并根据选中的值同步更新其他组的对应选项。这种方法不仅保证了数据的一致性，也极大地提升了用户在复杂表单中的交互体验和可用性。
