在提交前验证至少选中一个复选框答案

【问题标题】：Verify at least one checkbox checked before submission在提交前验证至少选中一个复选框
【发布时间】：2013-11-09 22:19:17
【问题描述】：

我希望在提交表单之前检查是否至少选中了一个复选框，这是我的代码：

<script type="text/javascript">
function validate() {
    if (document.getElementById('checking').checked) {
        alert("checked");
    } else {
        alert("You didn't check it! Let me check it for you.")
    }
}
</script>

<?php foreach (..... ) : ?>

<form name="frm1" id="frm1" method="post" action="next.php" >
...
<input type="checkbox" value="" class="chk"  id="checking"/>
...
 <a href="#" onclick="$(this).closest('form').submit(); validate();"  id="add_view" ><img src="/submit.png"></a>

....

</form>

我确实喜欢，但它似乎对我不起作用，我看到了这条消息，但同时它提交也不足以验证至少一个复选框被选中？

【问题讨论】：

您是否考虑过为按钮使用form.onsubmit 事件 (stackoverflow.com/a/16262814/209103) 和常规 HTML button (stackoverflow.com/a/8488022/209103)？

标签： javascript jquery

【解决方案1】：

Onclick 会触发两个事件，即验证和提交。例如，您可以将提交部分放在验证脚本中，并且仅在验证成功时才提交表单。

编辑：发布更完整的代码示例

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
    function validate() {
      if ($('#checking').is(':checked')) {
        $('#frm1').submit();
      } else {
        alert("You didn't check it! Let me check it for you.");
        $('#checking').attr('checked', true);
      }
    }
    </script>

    <form name="frm1" id="frm1" method="post" action="next.php" >
      <input type="checkbox" value="" class="chk"  id="checking"/>
      <a href="#" onclick="validate(); return false;" id="add_view"><img src="/submit.png"></a>
    </form>
  </body>
</html>

此外，您还应该考虑添加服务器端验证（如果尚不存在），因为用户可以在运行时使用 FireBug 等工具轻松更改页面上的 HTML/JavaScript，并提交无论如何都无效的数据。

【讨论】：

好的，更新了sn-p。这适用于我的浏览器，因此如果您在页面上有其他内容将其弄乱并导致问题，您也需要更新您的问题。
您是否尝试过调试 JS 执行并查看哪里出错了？这是一个非常简单的场景。您在 JQuery 上提供的 id 实际上与复选框匹配吗？复选框是否声称即使已选中也未选中？您是否碰巧有多个具有相同 ID 的复选框（在 HTML 中是非法的），因为您在原始帖子中具有该 foreach 结构？就像我说的，网页上的上述内容（除此之外没有其他内容）对我来说效果很好，所以如果你有关于你不愿意分享的细节的额外代码，那么很难判断出了什么问题。

【解决方案2】：

我在原始答案中建议您需要“类似...”。

这应该是一个完整的工作解决方案。需要添加的技巧是validate 应该返回一个真/假，以便我们可以决定是否提交表单。

<script type="text/javascript">
  function validate() {
    if (document.getElementById('checking').checked) {
      alert("checked");
      return true;
    } else {
      alert("You didn't check it! Let me check it for you.")
      return false;
    }
  }
</script>


<form name="frm1" id="frm1" method="post" action="next.php" >
  <input type="checkbox" value="" class="chk"  id="checking"/>
  <a href="#" onclick="if(validate()) { $(this).closest('form').submit(); } return false;"  id="add_view" ><img src="/submit.png"></a>
</form>

原答案： 您的点击处理程序中可能需要一些更像

if (validate()) { $(this).closest('form').submit(); }

这应该使提交等到警报关闭。如果您希望在未发生复选框的情况下不提交表单，那么您可以从 validate() 返回 true/false，并且同样可以。

【讨论】：