jQuery获取复选框被选中值

当网页中存在一组复选框，并且需要获取用户选择的值时，可以借助jQuery轻松实现。jQuery是一个流行的JavaScript库，简化了对HTML元素的操作和事件处理。以下是如何使用jQuery获取复选框被选中值的方法，有需要的小伙伴可以参考一下：

1、HTML结构

首先，我们需要在 HTML 中定义一组复选框。每个复选框都应该有一个唯一的 ID 和一个对应的值。

<input type="checkbox" id="option1" value="option1"> Option 1
<input type="checkbox" id="option2" value="option2"> Option 2
<input type="checkbox" id="option3" value="option3"> Option 3

2、jQuery获取选中值

接下来，我们使用 jQuery 来捕获用户选择的复选框的值。

$(document).ready(function() {
    // 当复选框状态改变时触发事件
    $('input[type="checkbox"]').change(function() {
        // 声明一个空数组用于存储被选中的值
        var selectedValues = [];
        // 遍历所有被选中的复选框
        $('input[type="checkbox"]:checked').each(function() {
            // 将被选中的复选框的值添加到数组中
            selectedValues.push($(this).val());
        });
        // 在控制台输出被选中的值（可选）
        console.log('Selected values:', selectedValues);
        // 在这里可以将选中的值用于其他操作
    });
});

3、解释

（1）、$(document).ready(function() { ... });：这段代码确保在文档加载完毕后再执行 jQuery 代码，以确保能够正确访问 DOM 元素。

（2）、$('input[type="checkbox"]').change(function() { ... });：这行代码会监听所有复选框的状态改变事件。当任何一个复选框的状态改变时，会触发这个事件处理函数。

（3）、$('input[type="checkbox"]:checked').each(function() { ... });：这行代码会遍历所有被选中的复选框。

（4）、selectedValues.push($(this).val());：这行代码会将被选中的复选框的值添加到一个数组中。

（5）、console.log('Selected values:', selectedValues);：这行代码用于在浏览器的控制台输出被选中的值，以进行调试和验证。

（6）、最后，可以根据需要在代码的最后部分使用选中的值进行其他操作。

通过这种方法，我们可以轻松地使用 jQuery 获取复选框被选中的值，并在网页中进行相应的处理。