为何带复选框的简单HTML表单提交后无法跳转至指定action页面？

架构老林

2026-8-27

问题根因

提交表单无法跳转的问题出在JS事件监听逻辑：你在submit回调的第一行就无条件执行了e.preventDefault()，这个方法会直接阻止表单的默认提交跳转动作——不管复选框是否勾选，表单的跳转逻辑一开始就被拦截了，自然不会跳到nextPage.html。

修复方法

调整e.preventDefault()的触发时机：仅在复选框未勾选、校验不通过时才阻止默认提交，展示错误提示；校验通过时不拦截默认行为，让表单按原有action配置正常提交跳转。

修改后的JS代码如下：

const form = document.getElementById('form')
const checkbox = document.getElementById('checkbox')
const message = document.getElementById('message')

form.addEventListener('submit', function validateCheckbox(e) {
    if (checkbox.checked) {
        message.textContent = 'Done'
        // 校验通过，不拦截默认行为，表单会自动提交跳转到nextPage.html
    } else {
        // 校验失败才阻止跳转，展示提示
        e.preventDefault()
        message.textContent = 'Please check the box to continue!'
    }
})

原有HTML代码不需要调整，保持如下结构即可正常运行：

<div class="container">
    <form method="post" action="nextPage.html" id="form">
        <label for="checkbox">By continuing, I agree that I have read and understand the terms of service.</label> <br>
        <input type="checkbox" id="checkbox">
        <button type="submit">Submit</button>
        <h5 id="message"></h5>
    </form>
</div>

注意点