jquery获取check已选择

欧易交易所欧易app 欧易下载搜狗输入法搜狗输入法 quickq下载 quickq官网

Hey小伙伴们，今天想和大家分享一个超实用的小技巧，那就是如何用jQuery来获取选中的复选框，是不是听起来就很酷呢？别急，跟着我一步步来，保证你也能成为jQuery小能手！

我们得知道复选框在HTML中是如何表示的，我们会用<input>标签，并且设置类型为checkbox，我们有三个复选框，代码看起来可能是这样的：

<input type="checkbox" name="fruit" value="apple"> 苹果
<input type="checkbox" name="fruit" value="banana"> 香蕉
<input type="checkbox" name="fruit" value="cherry"> 樱桃

我们的目标是使用jQuery来找出哪些复选框被选中了，这里有几个方法可以实现，我会一一介绍。

方法一：使用`:checked`选择器

jQuery提供了一个非常方便的选择器:checked，它可以帮你直接选取所有被选中的复选框，看下面的代码：

$(document).ready(function() {
    var checkedFruits = $('input[name="fruit"]:checked').map(function() {
        return this.value;
    }).get();
    console.log(checkedFruits); // 这里会输出所有选中的复选框的值
});

这段代码首先等待文档加载完成，然后使用:checked选择器找到所有名为fruit且被选中的复选框。map函数用来遍历这些选中的复选框，并返回它们的值，我们用get方法将结果转换成数组，并打印出来。

方法二：使用`change`事件

如果你想要实时获取复选框的状态变化，可以使用change事件，这样，每当用户勾选或取消勾选复选框时，你都能获取到最新的状态，代码如下：

$(document).ready(function() {
    $('input[name="fruit"]').change(function() {
        var checkedFruits = $('input[name="fruit"]:checked').map(function() {
            return this.value;
        }).get();
        console.log(checkedFruits); // 每次复选框状态变化时，都会输出当前选中的复选框的值
    });
});

这里，我们给所有名为fruit的复选框绑定了change事件，每当复选框的状态发生变化时，都会执行回调函数，获取当前所有选中的复选框的值，并打印出来。

方法三：使用`each`函数

如果你想要更细致地控制每个复选框的处理流程，可以使用each函数，这个方法允许你对每个复选框进行单独的操作。

$(document).ready(function() {
    $('input[name="fruit"]').each(function() {
        if ($(this).is(':checked')) {
            console.log('选中了：' + $(this).val());
        }
    });
});

这段代码会遍历所有名为fruit的复选框，检查它们是否被选中，如果被选中，就打印出它的值。

动态添加复选框

你可能需要动态地添加复选框，并且希望这些新添加的复选框也能响应上述的事件，这可以通过on方法来实现，看下面的代码：

$(document).ready(function() {
    // 动态添加复选框
    var newCheckbox = $('<input type="checkbox" name="fruit" value="orange"> 橘子');
    $('body').append(newCheckbox);
    // 使用on方法绑定事件
    $('body').on('change', 'input[name="fruit"]', function() {
        var checkedFruits = $('input[name="fruit"]:checked').map(function() {
            return this.value;
        }).get();
        console.log(checkedFruits); // 包括新添加的复选框在内，输出所有选中的复选框的值
    });
});

这里，我们首先创建了一个新的复选框，并添加到页面中，我们使用on方法给body元素绑定了一个change事件，这样无论是现有的复选框还是新添加的复选框，状态变化时都能被捕捉到。

好了，以上就是用jQuery获取选中复选框的几种方法，希望这些小技巧能帮助你在项目中更灵活地处理复选框，记得，实践是检验真理的唯一标准，所以赶紧动手试试吧！如果你有任何问题或者想要分享你的小技巧，随时欢迎在评论区交流哦！