jQuery 中检查复选框是否被选中：完整实践指南-html教程-PHP中文网

jQuery 中检查复选框是否被选中：完整实践指南

本文详解如何在 jQuery 中准确判断复选框（checkbox）的选中状态，并结合表单验证场景（如注册页“同意条款”校验）实现即时反馈与提交拦截，涵盖 .prop('checked') 的正确用法、事件绑定时机及常见误区规避。

本文详解如何在 jquery 中准确判断复选框（checkbox）的选中状态，并结合表单验证场景（如注册页“同意条款”校验）实现即时反馈与提交拦截，涵盖 `.prop('checked')` 的正确用法、事件绑定时机及常见误区规避。

在 Web 表单开发中，验证用户是否勾选「我已阅读并同意条款」这类复选框是强制性合规要求。许多开发者误用 .val() 或 .attr('checked') 导致逻辑失效——关键在于：必须使用 .prop('checked') 获取布尔值状态，而非 .val()（它返回字符串 "on" 或 undefined，无法直接用于条件判断）。

以下是一个健壮、可复用的实现方案：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

✅ 正确写法：使用 .prop('checked') 判断状态

$(document).ready(function() {
  // 封装校验逻辑，便于复用
  function validateTerms() {
    const isChecked = $('#tcs').prop('checked');
    if (!isChecked) {
      $('.tac').text('You must agree to the Terms and Conditions to continue');
      return false; // 校验失败
    } else {
      $('.tac').empty();
      return true; // 校验通过
    }
  }

  // 方案1：监听 checkbox 状态变化（实时反馈）
  $('#tcs').on('change', validateTerms);

  // 方案2：点击提交按钮时统一校验（最终拦截）
  $('.reg').on('click', function(e) {
    e.preventDefault(); // 阻止默认提交，便于前端控制
    if (!validateTerms()) {
      // 可在此处聚焦 checkbox 或滚动到错误位置
      $('#tcs').focus();
      return;
    }

    // ✅ 所有校验通过，执行后续逻辑（如提交表单）
    // $('#myForm').submit(); // 或使用 AJAX 提交
  });
});