简单的 JavaScript 复选框验证

Question

我通常使用 PHP，所以遗憾的是没有一些基本的 JS 原则。这就是我想要完成的全部——我已经看过很多关于这个主题的帖子，但它们通常超出了我的需要。

这是我的表格：

 <input type="checkbox" name="checkbox" value="check"  />
 <input type="submit" name="email_submit" value="submit" onclick="----??----"  />

复选框是一个简单的“我同意”。我希望按下提交按钮，并且仅在选中该复选框时才会提交。

事情是这样的：我想要一种简单的欺骗方式——没有方法——只是一些这种形式的内联代码（假设它不是太长？）。这不是一个公共页面，我只需要这种类型的验证快速简单的东西。如果未选中，它将抛出警报（）；如果它被选中，它将通过 php 通过 post 提交并照常进行。

原文由 TheLettuceMaster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以使用：

 if(!this.form.checkbox.checked)
 {
 alert('You must agree to the terms first.');
 return false;
 }

（ 演示页面）。

 <input type="checkbox" name="checkbox" value="check" />
 <input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" />

• 从内联事件处理程序返回 false 将阻止默认操作发生（在这种情况下，提交表单）。

• ! 是 布尔非运算符。

• this 是提交按钮，因为它是事件处理程序附加到的元素。

• .form 是提交按钮所在的表单。

• .checkbox 是该表单中名为“checkbox”的控件。

• .checked 如果复选框被选中则为真，如果复选框未被选中则为假。

原文由 PleaseStand 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

现在不需要 jquery 或 php。像这里一样只使用“必需”的 HTML5 输入属性

 <form>
        <p>
            <input class="form-control" type="text" name="email" />
            <input type="submit" value="ok" class="btn btn-success" name="submit" />
            <input type="hidden" name="action" value="0" />
        </p>
        <p><input type="checkbox" required name="terms">I have read and accept <a href="#">SOMETHING Terms and Conditions</a></p>
 </form>

这将在选择复选框之前验证并阻止任何提交。语言无关的解决方案，因为它是由用户的网络浏览器生成的。

原文由 user3244842 发布，翻译遵循 CC BY-SA 3.0 许可协议