Fatal编程技术网
  • javascript/
  • Javascript 在提交之前，至少检查一个复选框

Javascript 在提交之前，至少检查一个复选框

javascript jquery

Javascript 在提交之前，至少检查一个复选框,javascript,jquery,Javascript,Jquery,我希望在提交表格之前检查是否至少选中了一个复选框，以下是我的代码： <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 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>


函数验证（）{
if（document.getElementById（'checking'）.checked）{
警报（“已检查”）；
}否则{
提醒（“你没有检查！让我帮你检查一下。”）
}
}
...
...
....
我确实喜欢这样做，但它似乎对我不起作用，我看到了消息，但同时它也提交了一条消息，即不足以验证是否选中了至少一个复选框？

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>


函数验证（）{
if（$（'#checking'）。是（':checked'））{
$（'#frm1'）。提交（）；
}否则{
警惕（“你没有检查！让我帮你检查一下。”）；
$（'#checking'）.attr（'checked'，true）；
}
}

此外，如果还不存在服务器端验证，您还应该考虑添加服务器端验证，因为用户可以在运行时轻松地在运行时使用像Fixbug这样的工具来更改页面上的HTML/JavaScript，并提交无效的数据。

< P>我在我的原始答案中建议您需要“类似的东西”。p> 以下是一个完整的工作解决方案。需要添加的技巧是，
validate
应该返回true/false，这样我们就可以决定是否提交表单

<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>
这将使提交等待，直到警报关闭。
如果您希望窗体不提交，如果复选框事件没有发生，那么您可以从ValueAd（）返回真/假，并且同样可以工作。

您是否考虑过使用<代码>窗体？OnSputs< /Cult>事件（）和一个规则的HTML“代码>按钮/代码>按钮（）？这可以在我的浏览器上运行，因此如果页面上有其他内容将其弄乱并导致问题，您也需要更新您的问题。您是否尝试过调试JS执行并查看其错误所在？这是一个非常简单的场景。您在JQuery上提供的id是否与复选框匹配？复选框是否声明即使已选中也未选中？既然您的原始帖子中有foreach结构，您是否会碰巧有多个id相同的复选框（在HTML中是非法的）？正如我所说，在我这方面，网页上的上述内容（没有其他内容）非常有效，如果您有其他代码围绕您不愿意共享的细节，那么很难判断出问题所在。 
if (validate()) { $(this).closest('form').submit(); }