如何用JQuery实现动态地址表单中主地址复选框的互斥选中效果

安全阿岳

2026-10-7

实现方案

步骤1：调整地址表单模板

首先给主地址复选框添加统一的公共类，方便全局选择，修改模板中复选框代码：

<!-- 原有class基础上新增js-primary-checkbox公共类 -->
<input type="checkbox" class="primary-%ID% js-primary-checkbox" name="primary-%ID%" id="primary-%ID%" />

步骤2：添加jQuery事件监听代码

因为表单是动态生成的，需要用事件委托绑定点击事件，把下面的代码放到全局JS脚本中即可，不需要放在addNewAddress函数内部：

// 事件委托绑定到固定存在的父容器#addressContainer，比绑定到document性能更高
$('#addressContainer').on('click', '.js-primary-checkbox', function() {
    // 只有当前点击的复选框是被勾选状态时，才取消其他所有同类复选框的选中状态
    if ($(this).is(':checked')) {
        $('.js-primary-checkbox').not(this).prop('checked', false);
    }
});

可选优化

如果需要限制用户必须保留至少一个主地址（不能取消所有勾选），可以调整代码如下：

$('#addressContainer').on('click', '.js-primary-checkbox', function() {
    if ($(this).is(':checked')) {
        $('.js-primary-checkbox').not(this).prop('checked', false);
    } else {
        // 如果取消勾选后没有其他选中的主地址，禁止本次取消操作
        if ($('.js-primary-checkbox:checked').length === 0) {
            $(this).prop('checked', true);
        }
    }
});