本文详细介绍了如何在同一个html表单中，实现两个位于不同位置的单选按钮组的自动同步。通过使用javascript事件委托机制，监听其中一个组的`change`事件，并根据选中的值来更新另一个组中对应的单选按钮状态，确保用户在任何一个组中进行选择时，另一个组都能实时反映相同的选择，从而提升用户体验和表单的交互性。
在复杂的表单设计中，有时出于用户体验或布局需求，我们需要在表单的不同区域显示相同功能的单选按钮组。例如，一个页面顶部和底部都有“选择人数”的选项。用户在任何一个位置做出选择时，我们希望另一个位置的选项也能自动更新，以保持数据的一致性。本文将指导您如何使用纯JavaScript实现这种双向同步功能。
HTML结构准备
首先，我们需要为每个独立的单选按钮组定义清晰的HTML结构。关键在于：
- 为每个组使用一个唯一的容器（例如div），并赋予其独特的id，以便JavaScript能够轻松地引用它们。
- 每个组内的单选按钮应具有相同的name属性，以确保它们在各自的组内是互斥的。
- 最重要的一点： 两个需要同步的组中，对应选项的value属性必须保持一致。例如，第一个组中value="1"的选项，在第二个组中也必须有value="1"的对应选项。
以下是示例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="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="checked" />
<span class="checkmark"></span>
</label>
</div>请注意，在上述HTML中，group-one的单选按钮name属性是number_people，而group-two的name属性是number_people2。这是为了让它们在HTML层面上是两个独立的单选组，从而允许用户在两个位置进行选择。如果它们的name属性相同，浏览器会视它们为一个大组，导致任何一个选择都会影响到所有具有相同name的单选按钮。
JavaScript实现同步逻辑
为了实现两个单选按钮组的同步，我们将使用事件委托（Event Delegation）技术。这意味着我们将在父容器上监听change事件，而不是为每个单独的单选按钮添加事件监听器。当容器内的任何单选按钮状态发生改变时，事件会冒泡到父容器，我们就可以捕获并处理它。
// 获取两个单选按钮组的容器元素
const groupOne = document.getElementById('group-one');
const groupTwo = document.getElementById('group-two');
/**
* 这是一个通用的函数，用于在一个单选按钮组发生变化时，更新另一个单选按钮组的状态。
* @param {HTMLElement} sourceGroup - 触发change事件的源组。
* @param {HTMLElement} targetGroup - 需要被更新的目标组。
*/
const changeGroup = (sourceGroup, targetGroup) => {
sourceGroup.addEventListener('change', (e) => {
// 确保事件是由单选按钮触发的
if (e.target.type === 'radio') {
// 获取被选中单选按钮的值
const selectedValue = e.target.value;
// 在目标组中找到具有相同值的单选按钮，并将其设置为选中状态
const targetRadio = targetGroup.querySelector(`input[type="radio"][value="${selectedValue}"]`);
if (targetRadio) {
targetRadio.checked = true;
}
}
});
};
// 建立双向同步：
// 当第一个组改变时，更新第二个组
changeGroup(groupOne, groupTwo);
// 当第二个组改变时，更新第一个组
changeGroup(groupTwo, groupOne);代码解析
- 获取元素： document.getElementById('group-one') 和 document.getElementById('group-two') 用于获取两个单选按钮组的父容器。
- changeGroup 函数： 这是一个核心函数，它接收两个参数：sourceGroup（事件源组）和 targetGroup（目标更新组）。
- 事件监听： sourceGroup.addEventListener('change', ...) 在源组容器上添加了一个change事件监听器。当源组内任何单选按钮的状态发生变化时，此事件将被触发。
- 事件委托判断： if (e.target.type === 'radio') 确保我们只处理由input type="radio"元素触发的change事件，避免处理容器内其他可能触发change事件的元素。
- 获取选中值： e.target.value 获取当前被选中单选按钮的value属性。
-
更新目标组：
- targetGroup.querySelector(\input[type="radio"][value="${selectedValue}"]`)使用CSS选择器在目标组内查找具有相同type和value`的单选按钮。
- targetRadio.checked = true; 将找到的目标单选按钮设置为选中状态。
- 双向同步： 最后，我们调用changeGroup函数两次，一次用于groupOne到groupTwo的同步，另一次用于groupTwo到groupOne的同步，从而实现完全的双向联动。
注意事项
- name属性： 确保每个独立的可选组内的单选按钮拥有相同的name属性，但不同组之间的name属性必须不同，否则它们将被浏览器视为同一个大组。
- value属性： 两个需要同步的组中，对应选项的value属性必须完全一致，这是JavaScript查找匹配项的关键。
- 初始状态： 如果页面加载时有默认选中的单选按钮（通过checked="checked"），请确保两个组的初始选中状态是一致的，否则可能需要额外的JavaScript代码在页面加载时进行一次同步。
- 性能： 对于只有少量单选按钮组的场景，这种方法非常高效。如果页面上存在大量需要同步的复杂控件，可能需要考虑更优化的解决方案或使用前端框架的数据绑定功能。
- 可访问性： 考虑为屏幕阅读器用户提供更好的体验，例如使用aria-live区域来通知用户其他区域的更新，但这通常在更复杂的应用中才需要。
总结
通过上述HTML结构和JavaScript代码，我们成功地实现了在同一个表单中，两个位于不同位置的单选按钮组的自动同步。这种方法利用了事件委托的优势，使得代码简洁、高效，并且易于维护。它不仅提升了用户体验，也确保了表单数据的逻辑一致性，是处理类似交互需求的有效解决方案。
