如何检查 jQuery 中 checkbox 是否被选中：完整指南及示例

如何检查 jQuery 中 checkbox 是否被选中：面向初学者的分步教程

你好，朋友！如果你曾经在网页上处理过表单，那么你肯定遇到过这样一个问题：“这个 checkbox 被选中了吗？”。看起来是小事，但正是这些小事常常让经验丰富的开发者都陷入困境。在 Stack Overflow 上，问题 “How do I check whether a checkbox is checked in jQuery?” 获得了数千次浏览，这意味着这个话题确实很热门。

在本教程中，我不仅仅会展示枯燥的语法。我们将探讨几种方法，进行比较，找出其中的陷阱，并编写出漂亮、可运行的代码。开始吧！

为什么这很重要？（以及 jQuery 在这里扮演什么角色？）

如今，许多人转向纯 JavaScript，但 jQuery 仍然存在于数百万个项目中：从旧网站到现代后台管理系统。了解如何使用 :checked 以及 .prop() / .attr() 方法，是能够为你节省数小时调试时间的基础知识。

想象一下：你在制作一个需要同意条款的注册表单。或者是一个带有商品筛选器的电商网站。没有对 checkbox 状态的检查，是行不通的。

方法 #1：经典方法——.prop() 方法

现代且正确的方法。从 jQuery 1.6 开始，对于布尔属性（checked, disabled, selected），应该使用 .prop()。

// HTML\n<input type="checkbox" id="agree"> 我同意条款\n\n// jQuery\nif ($('#agree').prop('checked')) {\n    console.log('复选框被选中了！');\n} else {\n    console.log('复选框未被选中。');\n}

为什么这样有效？ .prop() 访问的是 DOM 元素的属性，该属性始终返回 true 或 false。这快速、可靠且没有意外。

方法 #2：:checked 选择器（简洁方法）

想要更简洁？使用伪选择器 :checked。它直接在选择器中检查元素是否被选中。

if ($('#agree:checked').length) {\n    console.log('被选中了！');\n} else {\n    console.log('未被选中。');\n}

或者更优雅的方式：

if ($('#agree').is(':checked')) {\n    console.log('被选中了！');\n}

.is() 方法在至少有一个元素匹配选择器时返回 true。漂亮且可读性强。

方法 #3：旧的 .attr() 方法——小心陷阱！

有时在旧教程中，你会看到这样的代码：

// 不好的示例\nif ($('#agree').attr('checked')) {\n    console.log('被选中');\n}

不要这样做！ .attr() 读取的是 HTML 属性，该属性在用户点击后不会改变。它只会在 HTML 中初始定义了该属性时返回 undefined 或字符串 "checked"。它不跟踪动态状态。准备好抓 Bug 了吗？

实际示例：包含多个复选框的表单

让我们把所有内容整合起来。假设我们有一个爱好列表，我们想知道用户选择了哪些。

<h3>选择你的爱好：</h3>\n<label><input type="checkbox" class="hobby" value="coding"> 编程</label>\n<label><input type="checkbox" class="hobby" value="gaming"> 游戏</label>\n<label><input type="checkbox" class="hobby" value="reading"> 阅读</label>\n<button id="showHobbies">显示已选</button>\n\n<script>\n$('#showHobbies').on('click', function() {\n    let selected = [];\n    $('.hobby:checked').each(function() {\n        selected.push($(this).val());\n    });\n    if (selected.length) {\n        alert('你选择了：' + selected.join(', '));\n    } else {\n        alert('未选择任何内容。');\n    }\n});\n</script>

请注意：我们使用了 .hobby:checked——这是一个选择器，它会立即只筛选出