Question

我有以下表格： https://expogr.com/bankexpokenya/advertise.php

我正在填写表单的详细信息，然后单击提交按钮。如果我没有选中一个复选框，它将显示一条消息，提示您“请选择任何一个复选框”，并带有ok按钮。单击ok按钮后，将提交表单。对于表单提交，我使用了电子邮件方法，因此将表单数据发送到特定的电子邮件id。

我尝试了以下代码：

$(document).ready(function(){
    $("form").submit(function(){
        if ($('input:checkbox').filter(':checked').length < 1){
            alert("Please select at least one option from above!");
            break;
            return false;
        }
    });
});

但是它不起作用。

$(document).ready(function(){
    $("form").submit(function(){
        if ($('input:checkbox').filter(':checked').length < 1){
            alert("Please select at least one option from above!");
            break;
            return false;
        }
    });
});

Answer 1

问题出在break语句上，请删除该语句，您的代码将按预期工作。另外，您无需单独使用.filter()，因为您可以将:checked指定为选择器的一部分：

$(document).ready(function(){
  $("form").submit(function(){
    if ($('input:checkbox:checked').length < 1){
      alert("Please select at least one option from above!");
      return false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="checkbox"/>First
  <input type="checkbox"/>Second
  <input type="submit" value="Submit"/>
</form>

您也可以尝试使用Event.preventDefault()：

$(document).ready(function(){
  $("form").submit(function(e){
    if ($('input:checkbox:checked').length < 1){
      alert("Please select at least one option from above!");
      e.preventDefault();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="checkbox"/>First
  <input type="checkbox"/>Second
  <input type="submit" value="Submit"/>
</form>

Answer 2

您可以删除break语句。请参见以下代码。

$(document).ready(function(){
$("form").submit(function(){
        if ($('input:checkbox').filter(':checked').length < 1){
            alert("Please select at least one option from above!");
            return false;
        }
    });
});

仅当使用javascript选中至少一个复选框时才提交表单

2 个答案: