在同一表单中同步不同位置的单选按钮组

<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>

// 获取两个单选按钮组的容器元素
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);