如何重置Bootstrap模态框表单内容且不丢失单选框值？

问题根源 #

你当前的重置代码中，$(this).find("input,textarea,select").val("")会匹配所有input元素，包括单选框（radio）。执行val("")会直接清空单选框的value属性，导致重置后单选框丢失value值。

方案1：修改选择器，排除单选框和复选框 #

调整第一个选择器，只对非单选/复选框的输入控件执行清空值操作，再单独处理单选/复选框的选中状态：

$("#myModal").on("hidden.bs.modal", function (e) {
    // 只清空文本输入、文本域、下拉框，排除单选和复选框
    $(this).find("input:not([type=radio]):not([type=checkbox]),textarea,select").val("").end()
        .find("input[type=checkbox], input[type=radio]").prop("checked", false).end();
});

方案2：使用表单原生reset()方法（更简洁） #

HTML表单原生的reset()方法会将表单重置为初始状态，自动保留所有控件的原始属性（包括单选框的value），仅取消选中/输入状态：

$("#myModal").on("hidden.bs.modal", function (e) {
    $(this).find('form')[0].reset();
});

这个方法更高效，也避免了手动选择控件的繁琐，推荐使用。

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