hi,欢迎访问本站!
当前位置: 首页Web前端正文

jq获取已选择复选框的值

墨初 Web前端 241阅读

在前端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()数组操作元素,可以向数组的未尾添加新的元素

声明:无特别说明,转载请标明本文来源!
相关推荐