📌  相关文章
📜  jquery 在提交前验证复选框 - Javascript (1)

📅  最后修改于: 2023-12-03 15:16:48.686000             🧑  作者: Mango

jQuery 在提交前验证复选框 - Javascript

在表单提交前，我们经常需要对表单输入内容进行验证，确保输入内容的合法性。本文介绍如何使用jQuery验证复选框是否被选中。

HTML代码

首先，我们需要一个复选框和一个提交按钮。

<form>
  <label for="agree">我同意协议</label>
  <input type="checkbox" name="agree" id="agree">
  <br>
  <button type="submit">提交</button>
</form>
jQuery验证代码

接着，我们使用jQuery编写验证代码。当提交按钮被点击时，我们判断复选框是否被选中。如果被选中，则提交表单，否则阻止表单的提交。

$(function() {
  $('form').submit(function() {
    if ($('#agree').is(':checked')) {
      return true;
    }
    alert('请同意协议');
    return false;
  });
});

首先，我们使用jQuery的$(function() { ... });语法，使代码在页面加载完成后执行。然后，我们使用$('form').submit(function() { ... });语法，将一个匿名函数绑定到表单的submit事件上。在这个匿名函数里，我们使用$('#agree').is(':checked')判断复选框是否被选中。如果被选中，返回true，表单会被正常提交。如果没有被选中，弹出提示框并返回false，表单不会被提交。

完整HTML代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery验证复选框是否被选中</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form>
    <label for="agree">我同意协议</label>
    <input type="checkbox" name="agree" id="agree">
    <br>
    <button type="submit">提交</button>
  </form>
  <script>
    $(function() {
      $('form').submit(function() {
        if ($('#agree').is(':checked')) {
          return true;
        }
        alert('请同意协议');
        return false;
      });
    });
  </script>
</body>
</html>
总结

本文介绍了如何使用jQuery验证复选框是否被选中。我们绑定一个函数到表单的submit事件上，当提交按钮被点击时，判断复选框是否被选中。如果被选中，表单会被正常提交。否则，阻止表单的提交并弹出提示框。