当前位置：首页 > jquery

jquery清空表单

2026-04-08 15:42:37jquery

jQuery 清空表单的方法

使用 jQuery 清空表单可以通过多种方式实现，以下是几种常见的方法：

方法一：使用 val('') 清空输入框和文本域

$('form input, form textarea').val('');

该方法适用于 <input> 和 <textarea> 元素，将其值设为空字符串。

方法二：使用 reset() 方法重置表单

$('form')[0].reset();

或者：

$('form').trigger('reset');

该方法会将表单所有字段重置为默认值（通常是初始状态）。

方法三：清空所有表单字段

$('form :input').each(function() {
    $(this).val('');
});

':input' 选择器匹配所有 <input>, <textarea>, <select> 和 <button> 元素。

方法四：针对特定类型的字段清空

$('form input[type="text"]').val('');
$('form input[type="password"]').val('');
$('form input[type="email"]').val('');
$('form textarea').val('');

该方法可以针对特定类型的输入字段进行清空操作。

注意事项

jquery清空表单

使用 reset() 方法会还原表单到初始状态，而不仅仅是清空值。

对于复选框和单选按钮，可能需要单独处理：

$('form input[type="checkbox"], form input[type="radio"]').prop('checked', false);

对于 <select> 元素，可能需要设置为默认选项：
```
$('form select').prop('selectedIndex', 0);
```

完整示例代码

// 方法1：使用reset()
$('#clearFormBtn').click(function() {
    $('#myForm')[0].reset();
});

// 方法2：手动清空所有字段
$('#clearFormBtn2').click(function() {
    $('#myForm :input').each(function() {
        switch(this.type) {
            case 'text':
            case 'password':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                $(this).prop('checked', false);
                break;
            case 'select-one':
            case 'select-multiple':
                $(this).prop('selectedIndex', 0);
                break;
        }
    });
});

以上方法可以根据实际需求选择使用，reset() 方法最为简单，但手动清空可以更精确控制表单状态。