勾选Checkbox后值不符合预期的问题排查

当下拉列表#availablePrefixes切换选项时，Tier III复选框默认处于勾选状态。勾选Tier II复选框时，UI上Tier III的勾选状态会取消，但提交表单时却同时发送Tier II和Tier III的true值，不符合仅发送Tier IItrue值的预期。

原始代码 #

HTML结构 #

<div>
    <div><label>Update Tiers:</label></div>
    <div>
        <label><input id="tierIPrefixCheckboxSelected1" name="tierIPrefixCheckboxSelected" type="checkbox" value=""><input type="hidden" name="_tierIPrefixCheckboxSelected" value="">Tier-I</label>
        <label><input id="tierIIPrefixCheckboxSelected1" name="tierIIPrefixCheckboxSelected" type="checkbox" value=""><input type="hidden" name="_tierIIPrefixCheckboxSelected" value="">Tier-II</label>
        <label><input id="tierIIIPrefixCheckboxSelected1" name="tierIIIPrefixCheckboxSelected" type="checkbox" value="true" checked="checked"><input type="hidden" name="_tierIIIPrefixCheckboxSelected" value="">Tier-III</label>
    </div>
</div>

JavaScript逻辑 #

$("#availablePrefixes").change(function () {
    //On change - just make sure all checkboxes have been unchecked
    $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
    $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
   
    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false)
    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");

    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false);
    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
    
    $('input:checkbox[name=tierIPrefixCheckboxSelected]').change(function(){
        console.log("Tier1 Prefix checkbox checked");
        $('input:checkbox[name=tierIPrefixCheckboxSelected]').val(true);
        $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',true);
        //Make Tier II and Tier III false and uncheck
        $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");
        $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false); 
        
        $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
        $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false); 
    })
    
    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').change(function(){
        console.log("Tier 2 Prefix checkbox checked");
        $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val(true);
        $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',true);
        //Make Tier I and Tier III false and uncheck
        $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
        $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
        
        $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
        $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false); 
    })
    
    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').change(function(){
        console.log("Tier 3 Prefix checkbox checked");
        $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val(true);
        $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',true);
        
        //Make Tier I and Tier II false and uncheck
        $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
        $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
        
        $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");
        $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false); 
    })
});

问题原因 #

1. 重复绑定事件：每次下拉框触发change事件时，都会给三个复选框重新绑定change事件。多次绑定后，同一个复选框会存在多个事件处理器，导致逻辑执行混乱（比如重复设置value或checked状态，互相覆盖）。
2. 错误使用attr()操作复选框状态：jQuery 1.6及以上版本中，复选框的checked状态属于元素的属性（property），而非HTML属性（attribute）。attr('checked', false)仅会移除HTML中的checked属性，无法正确更新复选框的实际选中状态，导致浏览器可能仍将其视为选中状态并提交value。
3. 未同步更新对应隐藏域：代码仅更新了复选框的value，但未同步修改对应的隐藏域（如_tierIIIPrefixCheckboxSelected）的值，可能导致后端参数接收异常。

修复方案 #

1. 避免重复绑定事件 #

将复选框的change事件绑定移到下拉框change事件外部，确保只绑定一次；或在绑定前先解绑旧事件（使用off('change')）。

2. 使用prop()替代attr()操作复选框状态 #

统一用prop()方法设置复选框的选中状态，确保DOM实际状态与UI显示一致。

3. 同步更新隐藏域的值 #

修改复选框状态时，同步更新对应隐藏域的值，保证前后端参数一致。

修复后的代码 #

// 封装取消其他复选框的公共函数，减少代码重复
function uncheckOtherTiers(currentName) {
    const tiers = ['tierIPrefixCheckboxSelected', 'tierIIPrefixCheckboxSelected', 'tierIIIPrefixCheckboxSelected'];
    tiers.forEach(name => {
        if (name !== currentName) {
            const checkbox = $('input:checkbox[name=' + name + ']');
            checkbox.prop('checked', false).val("");
            $('input:hidden[name=_' + name + ']').val("");
        }
    });
}

// 绑定复选框change事件，仅执行一次
$('input:checkbox[name=tierIPrefixCheckboxSelected]').change(function(){
    console.log("Tier1 Prefix checkbox checked");
    $(this).prop('checked', true).val(true);
    $('input:hidden[name=_tierIPrefixCheckboxSelected]').val(true);
    uncheckOtherTiers('tierIPrefixCheckboxSelected');
});

$('input:checkbox[name=tierIIPrefixCheckboxSelected]').change(function(){
    console.log("Tier 2 Prefix checkbox checked");
    $(this).prop('checked', true).val(true);
    $('input:hidden[name=_tierIIPrefixCheckboxSelected]').val(true);
    uncheckOtherTiers('tierIIPrefixCheckboxSelected');
});

$('input:checkbox[name=tierIIIPrefixCheckboxSelected]').change(function(){
    console.log("Tier 3 Prefix checkbox checked");
    $(this).prop('checked', true).val(true);
    $('input:hidden[name=_tierIIIPrefixCheckboxSelected]').val(true);
    uncheckOtherTiers('tierIIIPrefixCheckboxSelected');
});

// 下拉框change事件仅负责初始化复选框状态
$("#availablePrefixes").change(function () {
    // 重置所有复选框和对应隐藏域
    $('input:checkbox[name=tierIPrefixCheckboxSelected]').prop('checked', false).val("");
    $('input:hidden[name=_tierIPrefixCheckboxSelected]').val("");
    
    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').prop('checked', false).val("");
    $('input:hidden[name=_tierIIPrefixCheckboxSelected]').val("");
    
    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').prop('checked', true).val(true);
    $('input:hidden[name=_tierIIIPrefixCheckboxSelected]').val(true);
});

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