如何基于复选框的数据属性值创建动态数组

Question

如果我单击一个复选框，则需要根据其数据属性值创建一个动态数组，并将所有具有相同数据属性值的选中复选框值推入该数组。

例如：如果我单击高度，则需要创建一个具有其数据属性值的数组，并在此数组中推送所有带有选中值的复选框

<input type="checkbox" name="" class="checkbox" data-parent="1" value="1">brand
<input type="checkbox" name="" class="checkbox" data-parent="2" value="2">style
<input type="checkbox" name="" class="checkbox" data-parent="3" value="3">height
<input type="checkbox" name="" class="checkbox" data-parent="4" value="4">width
<input type="checkbox" name="" class="checkbox" data-parent="2" value="5">style
<input type="checkbox" name="" class="checkbox" data-parent="3" value="6">height
<input type="checkbox" name="" class="checkbox" data-parent="3" value="7">height
    <script type="text/javascript">
        $('.checkbox').click(function(){
            var newarray = [];
            var id = $(this).val();
            var pid = $(this).attr('data-parent');
            newarray[pid] = id;
        });

    </script>

Answer 1

 var filterCriteria = {}; var $checkboxes = $('.checkbox').click(function() { var $this = $(this); var parentValue = $this.data('parent'); filterCriteria[parentValue] = $checkboxes .filter(`[data-parent="${parentValue}"]:checked`) .map(function(){ return this.value }) .get(); console.log( filterCriteria ); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="" class="checkbox" data-parent="1" value="1">brand <input type="checkbox" name="" class="checkbox" data-parent="2" value="2">style <input type="checkbox" name="" class="checkbox" data-parent="3" value="3">height <input type="checkbox" name="" class="checkbox" data-parent="4" value="4">width <input type="checkbox" name="" class="checkbox" data-parent="2" value="5">style <input type="checkbox" name="" class="checkbox" data-parent="3" value="6">height <input type="checkbox" name="" class="checkbox" data-parent="3" value="7">height 

这可能是您所追求的。 如果要按值将其父键分组，则要知道要在哪个键上过滤哪些值。 它通过更改后的复选框来过滤复选框，映射出它们的值，获取基本数组，然后将其设置在过滤器对象上。