Radio Button联动问题：选中指定单选框时未自动关联对应选项

需求说明 #

需要实现以下单选按钮联动逻辑：

• 选中ID为DeliveryYesSingle的单选框时，自动选中ID为deliveryYesSingleBoard的单选框
• 选中ID为DeliveryNoSingle的单选框时，自动选中ID为DeliveryNoSingleBoard的单选框
• 页面加载完成时，自动根据已选中的单选框同步下方对应选项

现有jQuery代码未实现上述功能，核心问题是仅执行了一次状态判断，未绑定单选框的变更事件，且未确保DOM加载完成后执行代码。

问题分析 #

1. 原代码未监听单选框的change事件，点击单选框时无法触发同步逻辑
2. 原代码未包裹在DOM就绪回调中，可能在页面元素未加载完成时就执行，导致无法找到目标元素
3. 使用属性选择器[id="xxx"]的效率低于直接使用ID选择器#xxx

修正后的代码 #

HTML代码 #

<div class="row gutters">
    <div class="col col-2">
        <div class="form-item form-checkboxes">
            <input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/><label data-timtranslationlabel="" for="deliveryCredit_Yes" class="checkbox" >Delivery on credit</label>
        </div>
    </div>
    <div class="col col-2">
        <div class="form-item form-checkboxes">
            <input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/><label data-timtranslationlabel="" for="deliveryCredit_No" class="checkbox" >Advance payment to supplier</label>
        </div>
    </div>
</div>
<div class="section" id="DeliveryOnCreditBoard" >    
    <div class="row gutters">
        <div class="col col-2">
            <div class="form-item form-checkboxes">
                <input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/><label data-timtranslationlabel="" for="deliveryYesSingleBoard" class="checkbox" >Delivery on credit</label>
            </div>
        </div>
        <div class="col col-2">
            <div class="form-item form-checkboxes">
                <input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="np"/><label data-timtranslationlabel="" for="DeliveryNoSingleBoard" class="checkbox" >Advance payment to supplier</label>
            </div>
        </div>
    </div>
</div>

jQuery代码 #

// 确保DOM加载完成后执行代码
$(document).ready(function() {
    // 定义同步单选框的复用函数
    function syncDeliveryOptions() {
        if ($('#DeliveryYesSingle').is(':checked')) {
            $('#deliveryYesSingleBoard').prop('checked', true);
        } else if ($('#DeliveryNoSingle').is(':checked')) {
            $('#DeliveryNoSingleBoard').prop('checked', true);
        }
    }

    // 页面加载时初始化同步状态
    syncDeliveryOptions();

    // 监听上方单选框的变更事件，触发同步
    $('input[name="deliveryCredit"]').on('change', syncDeliveryOptions);
});

代码说明 #

• 用$(document).ready()包裹代码，确保DOM元素加载完成后再执行操作
• 提取同步逻辑为单独函数，方便在页面初始化和单选框变更时复用
• 绑定name="deliveryCredit"的单选框change事件，点击时自动同步下方选项
• 页面加载时主动调用同步函数，初始化选中状态

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