您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

jQuery 一鍵重置表單：優雅清空輸入框並保留默認值的最佳實踐

編輯：Java 相關知識

痛點：原生 reset() 缺陷與手動清空的繁瑣

HTML 原生 <input type="reset"> 只能將表單恢復到「頁面載入時的初始值」，無法實現「完全清空」或「保留部分預設值」等進階需求。當表單欄位超過 10 個時，逐個 $('#field').val('') 既冗長又難維護。

核心方案：選擇器 + 過濾鏈

<form id="form">
  <input type="text" value="123" /><br/>
  <input type="radio" name="radio" value="1" checked/>
  <input type="radio" name="radio" value="2" />
  <input type="file" /><br/>
  <input type="checkbox" name="checkbox" value="1" checked/>
  <input type="checkbox" name="checkbox" value="2" /><br/>
  <input type="submit" value="提交"/>
  <input type="button" id="reset" value="重置" />
</form>

<script src="js/jquery.min.js"></script>
<script>
$(function(){
    $("#reset").click(function(){
        $(':input', '#form')
            .not(':button, :submit, :reset, :hidden')  // 排除功能性按鈕與隱藏域
            .val('')                                    // 清空 value
            .removeAttr('checked')                      // 移除單/複選框選中狀態
            .removeAttr('selected');                    // 移除下拉選項選中狀態
    });
});
</script>

關鍵細節解析

程式碼片段	作用	注意事項
`:input`	選擇所有表單控件（input/textarea/select/button）	包含 `type="button"`，故需配合 `.not()` 排除
`.not(':button, :submit, :reset, :hidden')`	保護功能性按鈕、隱藏域不被清空	若有 `type="image"` 亦需加入排除
`.val('')`	統一清空 `value` 屬性	對 `<select>` 會將選中項重置為第一項
`.removeAttr('checked')`	取消 radio/checkbox 選中	不觸發 `change` 事件，若需觸發請用 `.prop('checked', false)`
`.removeAttr('selected')`	清空下拉選單選中狀態	配合 `.val('')` 可完整重置 `<select>`

進階需求：保留特定欄位的預設值

若「驗證碼輸入框」需保留預設提示文字，可加 data-keep-default="true 標記：

$('#reset').click(function(){
    $(':input', '#form').not('[data-keep-default], :button, :submit, :reset, :hidden')
        .val('').removeAttr('checked selected');
});