jQuery表单reset方法无法重置复选框的问题咨询

当你通过脚本动态修改复选框的勾选状态后调用 $("#formId")[0].reset()，其他控件正常重置但复选框失效，核心原因是：reset() 方法是基于控件的初始DOM默认状态（页面加载时的状态）来重置的。如果你的脚本用 .prop('checked', ...) 修改了复选框状态，浏览器不会自动更新它的defaultChecked属性（这是reset()的判断依据），所以重置时复选框只会回到页面加载时的原始状态，而非你期望的状态。

1. 手动强制重置复选框 #

调用原生reset()后，手动遍历复选框并设置目标状态：

$("#formId")[0].reset();
// 示例：将所有复选框重置为未勾选状态
$("#formId input[type='checkbox']").each(function() {
    this.checked = false;
    // 若部分复选框有初始默认勾选，可改为：
    // this.checked = this.defaultChecked;
});

2. 提前保存初始状态，重置时恢复 #

页面加载时先记录每个复选框的初始状态，重置时用该状态恢复：

// 页面初始化时保存初始状态
$("#formId input[type='checkbox']").each(function() {
    $(this).data('initialState', this.checked);
});

// 自定义重置函数
function resetMyForm() {
    $("#formId")[0].reset();
    // 恢复复选框初始状态
    $("#formId input[type='checkbox']").each(function() {
        this.checked = $(this).data('initialState');
    });
}

3. 动态修改时同步更新defaultChecked #

如果需要让reset()识别你脚本设置的状态为新默认值，修改勾选状态时同步更新defaultChecked：

// 动态勾选复选框时，同步设置默认状态
$("#targetCheckbox").prop({
    checked: true,
    defaultChecked: true
});

// 此时调用reset()，该复选框会保持勾选状态
$("#formId")[0].reset();

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