使用脚本重置id为testId的元素下的子表单控件值失效如何解决

AI 小北

2026-9-29

问题根因

你之前的方法不生效核心有两个原因：

id="testId"的元素是<div>标签，而reset()是只有<form>标签才拥有的原生方法，所有调用reset()、触发reset事件的写法对div都无效
部分写法只覆盖了input输入框，没有处理select下拉框等其他表单控件，逻辑不完整

正确实现方案

1. 原生JavaScript实现

function myFunction() {
  const container = document.getElementById('testId');
  // 选中容器内所有表单控件
  const formControls = container.querySelectorAll('input, select, textarea');
  formControls.forEach(control => {
    if (control.tagName === 'INPUT' || control.tagName === 'TEXTAREA') {
      control.value = '';
      // 清空单选、复选框选中状态
      if (control.type === 'radio' || control.type === 'checkbox') {
        control.checked = false;
      }
    } else if (control.tagName === 'SELECT') {
      // 下拉框默认选中第一个选项
      control.selectedIndex = 0;
    }
  });
}

2. jQuery实现（项目已引入jQuery时可用）

function myFunction() {
  const $container = $('#testId');
  // 清空输入框、文本域内容
  $container.find('input, textarea').val('');
  // 重置下拉框到第一个选项
  $container.find('select').prop('selectedIndex', 0);
  // 清空单选、复选框选中状态
  $container.find('input[type="radio"], input[type="checkbox"]').prop('checked', false);
}