dimanche 2 février 2020

jQuery convert checkbox selections to array ( when unchecked make it empty)

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




Aucun commentaire:

Enregistrer un commentaire