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

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

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

1 个答案: