如何在 jQuery 中获取复选框的选中值 - Javascript

在 Web 开发中，很经常需要获取用户在复选框中所选取的值，本文将介绍如何在 jQuery 中获取复选框的选中值。

获取单个复选框的选中状态

要获取单个复选框的选中状态，可以通过 prop 方法来判断其 checked 属性：

// HTML 代码
// <input type="checkbox" id="chkbox" value="1">

// jQuery 代码
var chkbox = $("#chkbox");
if (chkbox.prop("checked")) {
    // 复选框被选中了
} else {
    // 复选框未被选中
}

在上面的代码中，我们首先通过 $ 函数获取了 ID 为 chkbox 的复选框，然后通过 prop 方法获取了它的 checked 属性，判断是否被选中。

获取多个复选框的选中状态

要获取多个复选框的选中状态，可以通过类选择器选取复选框元素，然后遍历所有的复选框，查找每个复选框的选中状态：

// HTML 代码
/*
<input type="checkbox" class="chkbox" value="1">
<input type="checkbox" class="chkbox" value="2">
<input type="checkbox" class="chkbox" value="3">
*/

// jQuery 代码
var chkboxs = $(".chkbox");
chkboxs.each(function() {
    if ($(this).prop("checked")) {
        // 复选框被选中了
    } else {
        // 复选框未被选中
    }
});

在上面的代码中，我们首先通过类选择器选取所有类名为 chkbox 的复选框元素，然后通过 each 方法遍历所有的复选框元素，获取每个复选框的选中状态。

获取选中的复选框的值

要获取选中的复选框的值，可以先获取所有选中的复选框，然后遍历所有复选框，查找选中的复选框所对应的值：

// HTML 代码
/*
<input type="checkbox" class="chkbox" value="1">
<input type="checkbox" class="chkbox" value="2">
<input type="checkbox" class="chkbox" value="3">
*/

// jQuery 代码
var values = [];
var chkboxs = $(".chkbox:checked");
chkboxs.each(function() {
    values.push($(this).val());
});

在上面的代码中，我们首先通过类选择器选取所有类名为 chkbox 的复选框元素，然后通过 :checked 伪类来获取所有被选中的复选框，最后遍历所有选中的复选框，获取它们所对应的值，并添加到 values 数组中。

总结

本文介绍了如何在 jQuery 中获取复选框的选中值，包括获取单个复选框的选中状态、获取多个复选框的选中状态和获取选中的复选框的值。如果您有更好的方法或建议，欢迎在评论中分享。