Ajax填充表单后，jQuery/JavaScript重置无法清除单选按钮值及选中状态？

看起来你碰到了原生form.reset()方法的一个常见坑——这个方法的作用是把表单元素恢复到页面加载时的初始默认值，而不是完全清空所有用户（或Ajax）设置的状态。当你通过Ajax动态选中单选按钮时，只是修改了它的checked属性，但没有同步更新它的defaultChecked（这才是reset时会参考的“初始状态”属性），所以调用reset后，单选按钮会回到页面刚加载时的状态，而不是你想要的未选中状态。

下面给你几个可行的解决方案：

方案1：手动遍历并重置所有单选/复选框 #

放弃依赖原生reset，手动清空表单元素，尤其是单选按钮，这种方式简单直接：

// 假设你的表单选择器是$('#yourForm')
function resetForm() {
  // 先调用原生reset处理文本框、下拉框等常规元素
  $('#yourForm')[0].reset();
  
  // 手动清除所有单选按钮的选中状态
  $('#yourForm input[type="radio"]').prop('checked', false);
  
  // 如果有复选框也需要清空，加上这行
  // $('#yourForm input[type="checkbox"]').prop('checked', false);
}

// 绑定返回按钮的点击事件
$('.back-button').on('click', function() {
  resetForm();
  // 这里添加你的返回逻辑，比如history.back()
});

方案2：动态设置时同步更新defaultChecked #

如果你还是想保留原生reset的行为，可以在Ajax填充数据的同时，同步更新单选按钮的defaultChecked属性，这样reset就能正确恢复到你期望的初始状态：

$.each(getData, function(name, value){
  var elementName = $('[name="frmSaveaccount_'+name.toLowerCase()+'"]'),
      elementType = elementName.prop('type'),
      elementVal = $.trim(value);
  
  switch(elementType){
    case 'checkbox':
      var isChecked = (value == 1);
      elementName.prop('checked', isChecked);
      // 同步更新defaultChecked，让reset能识别这个状态
      elementName.prop('defaultChecked', isChecked);
      break;
    case 'radio':
      // 找到对应值的单选按钮
      var targetRadio = elementName.filter('[value="'+elementVal+'"]');
      if(targetRadio.length > 0){
        targetRadio.prop('checked', true);
        targetRadio.prop('defaultChecked', true);
        // 同组其他单选按钮的defaultChecked要设为false
        elementName.not(targetRadio).prop('defaultChecked', false);
      }
      break;
    // 处理文本框、下拉框等元素
    default:
      elementName.val(elementVal);
      elementName.prop('defaultValue', elementVal);
      break;
  }
});

之后再调用$('#yourForm')[0].reset()时，单选按钮就会回到你设置的默认状态（比如未选中）。

方案3：利用表单克隆备份 #

如果表单结构复杂，还有一种更彻底的方式：页面加载完成后先克隆一份干净的表单（无Ajax填充数据的状态），需要重置时用克隆的表单替换当前表单：

// 页面加载完成后，备份初始状态的表单
var cleanForm = $('#yourForm').clone();

// 返回按钮点击时替换表单
$('.back-button').on('click', function() {
  $('#yourForm').replaceWith(cleanForm.clone());
  // 注意：如果表单绑定了事件，需要重新绑定
  // 这里添加你的返回逻辑
});

这个方法能完全恢复到页面初始状态，但要记得重新绑定表单相关的事件处理程序。

你可以根据自己的场景选择最适合的方案，一般来说方案1是最省心的选择。

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