How can I delete an element in an object?

Question

I have a checkbox which add an id of his value in array when checked and I want to delete this value when I uncheck it

I tried to remove my id with and indexOf() + splice() but I can't use indexOf() because I'm using an object

Some one have an idea to how can I delete my id when I uncheck my checkbox, or if there is a trick to use indexOf with an object?

there is my script :

$(document).ready(function() {

  const formInputIds = $('form#export input[name="ids"]');

  $('.exportCheckbox:checkbox').on('change', function() {
    const announceId = $(this).data('id');
    if (this.checked) {
      formInputIds.push(announceId);
      console.log(formInputIds);
    } else {
      const index = formInputIds.val().indexOf(announceId);
      if (index > -1) {
        formInputIds.val().splice(index, 1);
      }
      console.log(formInputIds);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="export" action="exportAnnounces">
  <input type="hidden" name="ids" value="[]" />
  <button type="submit" class="btn btn-primary">Download</button>
</form>


<some data of product displayed>

  <input type="checkbox" data-id="{{annonce._id}}" class="exportCheckbox"/>

there is the console.log of formInputIds with 3 ids :

Answer 1

Consider the following.

$(function() {

  var formInputIds;

  function getChecked(target) {
    var results = [];
    $("input[type='checkbox']", target).each(function(i, elem) {
      if ($(elem).is(":checked")) {
        results.push($(elem).data("id"));
      }
    });
    return results;
  }

  $('.exportCheckbox').on('change', function(event) {
    formInputIds = getChecked($(this).parent());
    console.log(formInputIds);
  });

  $("#export").submit(function(event) {
    event.preventDefault();
    console.log(formInputIds);
    $("[name='ids']", this).val("[" + formInputIds.toString() + "]");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="export" action="exportAnnounces">
  <input type="hidden" name="ids" value="[]" />
  <button type="submit" class="btn btn-primary">Download</button>
</form>


<div class="some content">
  <input type="checkbox" data-id="1001" class="exportCheckbox" />
  <input type="checkbox" data-id="1002" class="exportCheckbox" />
  <input type="checkbox" data-id="1003" class="exportCheckbox" />
  <input type="checkbox" data-id="1004" class="exportCheckbox" />
  <input type="checkbox" data-id="1005" class="exportCheckbox" />
  <input type="checkbox" data-id="1006" class="exportCheckbox" />
</div>

This way, you build the Array based on just the checked items. No need to find and slice the exact item.