How to create a dynamic array based on checkbox data-attribute value

Question

if I click on one checkbox, need to create a dynamic array based on its data-attribute value and push all checked checkbox value with same data-attribute value to this array.

Ex: if i click on height,i need to create an array with its data-attribute value and push all checkbox with checked value in this array

<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>

So, this question was already asked, and answered. Why was it deleted? The answer is still valid — Taplar
– Taplar, Commented Aug 2, 2019 at 16:41
@Taplar you are just pushing the attribute value to a array, here i need to create an array for each like if i click height,create one array for height and push all checked height value to this array — Rp9
– Rp9, Commented Aug 2, 2019 at 16:56
Then you need to include the html associated with what you are trying to do to make it more clear. — Taplar
– Taplar, Commented Aug 2, 2019 at 16:58
So, if one height is checked, you want the array to contain all the values for all the heights, regardless of if they are checked or not? — Taplar
– Taplar, Commented Aug 2, 2019 at 17:02

Taplar · Accepted Answer · 2019-08-02 17:21:53Z

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

This may be more what you're after. If you are wanting to group values by their parent key, to know which values to filter on which key. It filters the checkboxes by the checkbox changed, maps out their values, gets the basic array, and then sets them on the filter object.

edited Aug 2, 2019 at 17:21

answered Aug 2, 2019 at 16:43

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rp9 Over a year ago

you are just pushing the attribute value to a array, here i need to create an array for each like if i click height,create one array for height and push all checked height value to this array

Rp9 Over a year ago

if unchecking,how can we remove this value

Taplar Over a year ago

It's already removing it. The parent will still be there, but with an empty array

Collectives™ on Stack Overflow

How to create a dynamic array based on checkbox data-attribute value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related