You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用jQuery实现单选框联动:选中时同步另一组对应选项

单选按钮联动实现:第一组选中时同步第二组选项

我有两组单选按钮,每组包含Yes和No两个选项。需求为:点击第一组的Yes选项时,自动选中第二组的Yes选项;点击第一组的No选项时,自动选中第二组的No选项。

HTML代码

<div class="row gutters">
    <div class="col col-2">
        <label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label>
    </div>
    <div class="col col-1">
         <div class="form-item form-checkboxes">
              <input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/>
              <label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
         </div>
    </div>
    <div class="col col-1">
        <div class="form-item form-checkboxes">
            <input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/>
            <label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
        </div>
    </div>
</div>
<div class="row gutters">
    <div class="col col-2">
        <label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label>
    </div>
    <div class="col col-1">
        <div class="form-item form-checkboxes">
            <input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
            <label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
        </div>
    </div>
    <div class="col col-1">
        <div class="form-item form-checkboxes">
            <input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
            <label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard" class="checkbox">No</label>
        </div>
    </div>
</div>

jQuery代码

$('#DeliveryYesSingle').on('change', () => {
    $('#deliveryYesSingleBoard').prop('checked', true);
});

$('#DeliveryNoSingle').on('change', () => {
        $('#DeliveryNoSingleBoard').prop('checked', true);
});

内容的提问来源于stack exchange,提问作者Przemek Dabek

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 11:40:19