jq获取已选择复选框的值

在前端web的html页面中，checkbox复选框元素可以让用户选择一个或多个选项。下面73so博客就说一说利用jquery脚本来获取checkbox复选框选中的值。

jquery获取checkbox复选框选中的值

例：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<input type="checkbox" name="color" value="0">黄色
<input type="checkbox" name="color" value="1">绿色
<input type="checkbox" name="color" value="2">红色
<input type="checkbox" name="color" value="3">蓝色
<input type="checkbox" name="color" value="4">白色
<button class="mochu">获取值</button>
<!-- https://www.73so.com -->
<script>
$('body').on('click','.mochu',function(){
    var checkboxes = $('input[type="checkbox"]');
    // 过滤未选择的checkbox，剩下的都是已选择的
    var checked = checkboxes.filter(':checked'); 
    var values = [];
    // 循环已选择checkbox元素，并放入数组中
    checked.each(function() {
        values.push($(this).val());
    });
    console.log(values);
});
</script>

注意：

1、filter()方法可以通过指定条件来过滤元素

2、each方法可以循环一个集合的元素

3、push()数组操作元素，可以向数组的未尾添加新的元素