jquery checkbox checked（一文讲透）

从零开始掌握 jQuery 中 checkbox 的选中状态操作

在网页开发中，表单元素是用户与系统交互的核心。其中，复选框（checkbox）因其简洁直观的交互方式，被广泛用于多选场景。无论是任务清单、用户权限设置，还是商品筛选功能，你几乎总能看到它的身影。而要让这些 checkbox 真正“听话”，离不开 JavaScript 的控制能力。

jQuery 作为曾经最流行的 JavaScript 库之一，简化了 DOM 操作和事件处理。尤其是在处理 checkbox 的选中状态时，它的语法简洁、逻辑清晰，非常适合初学者入门。本文将带你一步步掌握如何使用 jQuery 操作 checkbox 的选中状态，从基础判断到批量控制，再到实际项目中的常见需求。

理解 checkbox 的 checked 属性

在深入代码之前，先搞清楚一个核心概念：checked。它是一个布尔属性，表示 checkbox 是否被选中。当用户点击复选框时，浏览器会自动更新这个属性的值。

在 HTML 中，你可以通过以下方式初始化一个被选中的 checkbox：

<input type="checkbox" id="agree" checked>
<label for="agree">我已阅读并同意条款</label>

这里的 checked 属性就是关键。它不是 CSS 样式，而是 DOM 的真实状态。当页面加载完成后，document.getElementById('agree').checked 的值是 true。

在 jQuery 中，我们可以通过 .prop() 方法来读取或设置这个属性。这就好比你家的门锁，checked 就是“锁是否关上”的状态，而 .prop() 就是检查或操作这把锁的工具。

判断 checkbox 是否被选中

最基础的需求是：判断某个 checkbox 是否被勾选。这在表单验证、条件判断时非常常见。

假设你有一个“是否同意协议”的复选框，需要在提交前检查它是否被选中：

// 获取 id 为 agree 的 checkbox 元素
var checkbox = $('#agree');

// 使用 .prop('checked') 判断是否选中
if (checkbox.prop('checked')) {
    console.log('用户已同意协议，可以继续提交');
} else {
    alert('请先同意服务条款');
}

代码注释说明：

  • $('#agree')：使用 jQuery 选择器获取元素，# 表示 ID 选择器。
  • .prop('checked')：获取该元素的 checked 属性值，返回 true 或 false。
  • if 判断：根据状态决定下一步动作。

这个方法非常稳定，不会因为 HTML 中没有 checked 属性而报错，因为 .prop() 会读取运行时的真实状态，而不是 HTML 字符串。

动态设置 checkbox 的选中状态

除了读取状态，我们更常需要“主动控制” checkbox 的选中状态。比如点击一个“全选”按钮，让所有项目都勾上。

我们来看一个实际例子：一个任务列表，包含多个待办事项。

<ul id="task-list">
    <li><input type="checkbox" value="1"> 学习 jQuery</li>
    <li><input type="checkbox" value="2"> 写博客</li>
    <li><input type="checkbox" value="3"> 健身 30 分钟</li>
    <li><input type="checkbox" value="4"> 洗碗</li>
</ul>
<button id="select-all">全选</button>
<button id="clear-all">取消全选</button>

现在我们通过 jQuery 实现“全选”功能：

// 当点击“全选”按钮时，将所有 checkbox 设置为选中
$('#select-all').on('click', function () {
    // 使用 .prop('checked', true) 设置所有 checkbox 为选中
    $('#task-list input[type="checkbox"]').prop('checked', true);
    console.log('所有任务已选中');
});

代码注释说明：

  • $('#select-all')：选择“全选”按钮。
  • .on('click', ...)：绑定点击事件。
  • $('#task-list input[type="checkbox"]')：选择所有属于任务列表的 checkbox。
  • .prop('checked', true)：主动设置属性为 true，实现“选中”。

同理，取消全选也类似：

// 取消全选
$('#clear-all').on('click', function () {
    $('#task-list input[type="checkbox"]').prop('checked', false);
    console.log('所有任务已取消选中');
});

这里的关键是 .prop() 的第二个参数。它不只是读取，还能写入。就像你用遥控器控制电视开关，true 是开，false 是关。

批量获取选中项的值

在很多场景下，我们不仅要设置状态，还要“收集”用户选中的数据。比如统计选中的任务数量，或提交选中的商品 ID。

我们来写一个函数，获取所有被选中的 checkbox 的 value 值：

function getSelectedValues() {
    var selectedValues = [];

    // 遍历所有 checkbox，筛选出 checked 的
    $('#task-list input[type="checkbox"]').each(function () {
        // this 指向当前 DOM 元素，用 .prop() 检查是否选中
        if ($(this).prop('checked')) {
            // 如果选中，将 value 添加到数组中
            selectedValues.push($(this).val());
        }
    });

    return selectedValues;
}

// 使用示例
$('#select-all').on('click', function () {
    $('#task-list input[type="checkbox"]').prop('checked', true);
    console.log('选中项:', getSelectedValues());
});

代码注释说明：

  • $.each()：遍历 jQuery 对象中的每个元素。
  • $(this)：在 each 回调中，this 是原生 DOM 节点，用 $() 包装成 jQuery 对象。
  • .val()：获取 input 的 value 属性值。
  • push()：将符合条件的值加入数组。

这个方法可以轻松扩展，比如用于提交表单、生成选中列表，甚至做前端筛选。

实际案例：动态控制多选状态

假设你正在开发一个商品筛选功能，用户可以选择多个类别。我们希望实现“反选”功能：点击按钮后，所有已选中的取消，未选中的选上。

// 反选按钮
$('#toggle-select').on('click', function () {
    // 选择所有 checkbox 并翻转它们的选中状态
    $('#category-list input[type="checkbox"]').each(function () {
        // 先获取当前状态，再取反
        var currentStatus = $(this).prop('checked');
        $(this).prop('checked', !currentStatus);
    });

    console.log('状态已翻转');
});

代码注释说明：

  • !currentStatus：逻辑非操作，true 变 false，false 变 true。
  • 通过循环遍历每个 checkbox，动态翻转其状态。

这种“状态翻转”在用户界面中非常常见，比如“夜间模式”切换、列表倒序等，原理一致。

常见问题与注意事项

在实际使用中，有几个容易踩坑的地方需要特别注意：

1. 使用 .attr() 与 .prop() 的区别

很多初学者会误用 .attr('checked') 来判断状态。这是错误的！

  • .attr('checked')：获取 HTML 中的属性字符串，如果没写 checked，返回 undefined。
  • .prop('checked')：获取运行时的真实状态，是布尔值。
// ❌ 错误用法（不要这样写）
console.log($('#agree').attr('checked')); // 可能返回 "checked" 或 undefined

// ✅ 正确用法
console.log($('#agree').prop('checked')); // 返回 true 或 false

2. 事件触发与状态更新

当你用 .prop('checked', true) 设置状态时，不会触发 change 事件。如果你依赖这个事件做后续逻辑（比如更新计数器），需要手动触发：

$('#agree').prop('checked', true).trigger('change');

3. 多个同名 checkbox 的处理

如果多个 checkbox 有相同的 name 属性，建议使用 value 或 data-* 属性来区分。不要依赖 name 做唯一标识。

总结：灵活控制 checkbox 的关键

通过本文的学习，你应该已经掌握了 jQuery 中 checkbox 选中状态的核心操作：

  • 使用 .prop('checked') 判断是否选中
  • 用 .prop('checked', true/false) 动态设置状态
  • 配合 each() 遍历，批量处理多个 checkbox
  • 理解 .attr() 与 .prop() 的本质区别

这些技巧不仅适用于 checkbox，也为你理解其他表单控件（如 radio、select）打下坚实基础。无论你是初学者还是中级开发者，这些知识都能让你在处理用户交互时更加游刃有余。

记住，一个优秀的前端开发者，不只是会写代码，更懂得如何让页面“聪明”地响应用户行为。而 jQuery 的 checkbox 控制，正是通往这一步的重要台阶。

在实际项目中，你可以将这些逻辑封装成工具函数，提高代码复用率。比如 selectAll(), getCheckedValues(), toggleChecked() 等，让团队协作更高效。

保持练习，你会发现，看似简单的 checkbox，背后藏着丰富的交互逻辑和设计哲学。