如何在jQuery中判断复选框是否勾选？注册表单验证问题

问题根源 #

你代码里有两个致命错误，直接导致复选框验证逻辑失效：

• 密码确认判断完全写错：误用了Java的equals()方法（JS里字符串比较要用===/!==），而且条件搞反了——应该是两次密码不相等时提示，你写的是相等时提示。这会触发JS报错，后面的复选框代码根本跑不起来。
• 没阻止表单默认提交：如果.reg是提交按钮，点击后页面直接刷新，就算提示出来也瞬间消失，看起来像没生效。

修复后的完整代码 #

HTML（补全表单结构，方便测试） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<form class="forms">
  <input type="text" id="fname" placeholder="Fullname">
  <p class="fn"></p>
  
  <input type="text" id="uname" placeholder="Username">
  <p class="un"></p>
  
  <input type="email" id="em" placeholder="Email">
  <p class="em"></p>
  
  <input type="password" id="pass" placeholder="Password">
  <p class="pas"></p>
  
  <input type="password" id="check" placeholder="Confirm Password">
  <p class="con"></p>
  
  <input type="checkbox" id="tcs">
  <label for="tcs">I have read and agree to the Terms and Conditions</label>
  <p class="tac"></p>
  
  <button type="button" class="reg">Register</button>
  <button type="button" onclick="reset()">Reset</button>
</form>

JS代码 #

function reset() {
  document.querySelector(".forms").reset();
}

$(".reg").click(function() {
  // 先清空所有提示和默认样式
  $(".fn, .un, .em, .pas, .con, .tac").empty();
  $("input").css({"border": "0.2px solid grey", "border-bottom": "3px solid black"});
  
  let isValid = true;

  // 全名验证
  const fname = $("#fname").val().trim();
  if (!fname) {
    $("#fname").css("border", "2px solid red");
    $(".fn").html("Fullname is required");
    isValid = false;
  }

  // 用户名验证
  const uname = $("#uname").val().trim();
  if (!uname) {
    $("#uname").css("border", "2px solid red");
    $(".un").html("Username is required");
    isValid = false;
  }

  // 邮箱验证
  const email = $("#em").val().trim();
  if (!email) {
    $("#em").css("border", "2px solid red");
    $(".em").html("Email is required");
    isValid = false;
  }

  // 密码长度验证
  const pass = $("#pass").val();
  if (pass.length < 8) {
    $("#pass").css("border", "2px solid red");
    $(".pas").html("Password must be at least 8 characters long");
    isValid = false;
  }

  // 修复密码确认逻辑
  const check = $("#check").val();
  if (check !== pass) {
    $("#check").css("border", "2px solid red");
    $(".con").html("Passwords don't match");
    isValid = false;
  }

  // 条款复选框验证（逻辑本身没问题，之前是前面报错导致没执行）
  const tac = $("#tcs").prop("checked");
  if (!tac) {
    $(".tac").text("You should agree to the terms and conditions");
    isValid = false;
  }

  // 所有验证通过再提交表单
  if (isValid) {
    $(".forms").submit();
  }
});

$("input").focus(function() {
  // 聚焦时只清空当前输入框对应的提示，更合理
  $(this).css({"border": "0.2px solid grey", "border-bottom": "3px solid black"});
  $(this).nextAll("p:first").empty();
});

重点说明 #

1. 密码比较错误修复：把check.equals(pass)改成check !== pass，用JS原生的字符串比较方式，避免报错中断代码。
2. 阻止页面刷新：按钮设为type="button"，或者在点击事件里加event.preventDefault()，确保提示能正常显示。
3. 优化验证流程：先清空所有状态，再逐一验证，用isValid变量控制提交，体验更好。
4. 聚焦逻辑优化：原来的$("p").empty()会清空所有提示，现在只清空当前输入框的提示，更精准。

内容的提问来源于stack exchange，提问作者Intr0vert