jq获取已选择复选框的值
墨初 Web前端 359阅读
在前端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()数组操作元素,可以向数组的未尾添加新的元素