Jquery 根据复选框值获取对象数组
[英]Jquery to get array of objects based on checkbox values
问题描述
I have multiple checkboxes in a html form I need to get the array of objects when any of the checkboxes in the html form is checked or unchecked, that is when a change is made it has to return the array of objects
我在html中有多个复选框，当ZFC35FDC70D5FC70D5FC69D269D2698883A822C7A53EED ITED IS the Mondey It thy ys a whosect ys y shand thyecect y shand thye y a wheckeck y y a y shoseck y shoseck y shoseck y shoseck y haseck时，我需要获取对象数组
I prefer to use $.map我更喜欢使用 $.map
The expected value is期望值为
[{"A": "dataA"},{"B": "dataB"}] when both A and B are checked [{"A": "dataA"}] when only A is checked and so on [{"A": "dataA"},{"B": "dataB"}] 当 A 和 B 都被检查时 [{"A": "dataA"}] 当只有 A 被检查时等等
I have tried with我试过了
<:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('input[type="checkbox"]').change(function() { alert($:map($("input[type='checkbox'],checked"). function(i) { var a = [] a[$(this).attr("name")] = $(this);attr("data-id"); return a })); }); }); </script> <input data-id="dataA" name="A" type="checkbox" />A <input data-id="dataB" name="B" type="checkbox" />B </head> </html>
2 个解决方案
解决方案1
1 已采纳 2022-01-24 11:23:23
Here is an object array using $().map() instead of $.map - note the .get() to get the array这是使用 $().map() 而不是 $.map 的 object 数组 - 注意.get()获取数组
$(function() { $('input[type="checkbox"]').on("change", function() { // using function allows "this" const res = $("input[type='checkbox']:checked").map(function(i) { return { [this.name]: this.dataset.id }; }).get(); console.log(res) }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input data-id="dataA" name="A" type="checkbox" />A <input data-id="dataB" name="B" type="checkbox" />B
And here is an object:这是一个 object：
$(function() { $('input[type="checkbox"]').on("change", function() { const res = {} $("input[type='checkbox']:checked").each(function(i) { res[this.name] = this.dataset.id; }); console.log(res) }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input data-id="dataA" name="A" type="checkbox" />A <input data-id="dataB" name="B" type="checkbox" />B
解决方案2
1 2022-01-24 11:29:38
The issue with your logic is that map() returns an array;您的逻辑问题是map()返回一个数组； you don't need to define a new array within the iteration handler and return that.您不需要在迭代处理程序中定义一个新数组并返回它。 You simply need to return the object you want to generate from each checkbox, like this:您只需返回要从每个复选框生成的 object，如下所示：
jQuery($ => { let $cb = $(':checkbox').on('change', () => { let checkedValues = $cb.filter(':checked').map((i, el) => ({ [el.name]: el.dataset.id })).get(); console.log(checkedValues); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input data-id="dataA" name="A" type="checkbox" />A <input data-id="dataB" name="B" type="checkbox" />B
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.