There is a solution here but I have a problem . when check box is checked and unchecked i wanted it to be empty but it results in
{ "category": [] }
but I wanted it to empty {}
const array = {};
$('[name^="pgggo-"]').on('click', function() {
const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
const id = attr.split('[')[0];
const checked = $(this).prop('checked');
array[taxonomy] = array[taxonomy] || [];
const index = array[taxonomy].indexOf(id);
index == -1 ? array[taxonomy].push(id) : array[taxonomy].splice(index, 1);
console.log(array);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pgggo-list-taxon">
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-56[]">
<div class="icon-box">
<div name="development">Development</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-14[]">
<div class="icon-box">
<div name="food">Food (category)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-home-sep-14[]">
<div class="icon-box">
<div name="food">Food (home)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-8[]">
<div class="icon-box">
<div name="medical">Medical</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-1[]">
<div class="icon-box">
<div name="uncategorized">Uncategorized</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-2[]">
<div class="icon-box">
<div name="wordpress">WordPress</div>
</div>
</label>
</li>
</div>Please help
]
