Javascript/jQuery - Pushing items to and removing from array

Question

I currently have a list of checkboxes spread over several pages (pagination), the values of which need to be stored in local storage so that I can list them all elsewhere on another page. I am therefore attempting to store all of these values in an array, and constantly update that array by adding/removing values depending on whether or not the checkboxes have been clicked.

I am currently using the following:

var brochuresList = [];

    jQuery('.brochure-select-checkbox').on('click', function () {
        var brochure, brochures = [];

        jQuery('.brochure-select-checkbox').each(function () {
            brochure = {id: jQuery(this).attr('id'), checked: jQuery(this).prop('checked'), value: jQuery(this).val()};
            brochures.push(brochure);
        });

        localStorage.setItem("brochures", JSON.stringify(brochures));

        for (var i = 0; i < brochures.length; i++) {
            if( jQuery('#' + brochures[i].id).is(':checked') && !brochuresList.includes(brochures[i].value) ){
                brochuresList.push(brochures[i].value);
            } else (!jQuery('#' + brochures[i].id).is(':checked')) {
                var index = brochuresList.indexOf(brochures[i].value);
                brochuresList.splice(index, 1);
            } 
        }

        console.log(brochuresList);
    });

However I seem to be having some odd behaviour. With all checkboxes 'unchecked', the console prints an empty array, which is correct. If I then click the first checkbox in the list, the console still returns an empty array - which is wrong. If I click another checkbox, I get both checkboxes in the array which is correct. Can anyone see in the above where I'm going wrong?

For a kick off use change rather than click for reading checkbox events. — Mitya
– Mitya, Commented Sep 6, 2017 at 17:18
@Utkanos Ah...I can only say that it was a long day at work! Thanks. — wickywills
– wickywills, Commented Sep 7, 2017 at 7:20

Niloct · Accepted Answer · 2017-09-06 17:56:20Z

Here's my attempt. It was not clear by your question how do you deal with duplicate values on the checkboxes. I just assumed that you want to check and uncheck every member that has same value as the one you're clicking.

Also, I could not test localstorage on this snippet, it issued an error.

Hope this helps you.

var brochuresList = [];

jQuery('.brochure-select-checkbox').on('click', function() {
  brochure = {
    id: jQuery(this).attr('id'),
    checked: jQuery(this).prop('checked'),
    value: jQuery(this).val()
  };
  if (brochure.checked) {
    if (brochuresList.indexOf(brochure.value) == -1) {
      brochuresList.push(brochure.value);
    }
  } else {
    brochuresList.splice(brochuresList.indexOf(brochure.value), 1);
  }
  jQuery('.brochure-select-checkbox').each(function() {
    if (jQuery(this).val() == brochure.value) {
      jQuery(this).prop('checked', brochure.checked);
    }
  });


  //SO Snippet doesn't allow testing this.
  //localStorage.setItem("brochuresList", JSON.stringify(brochuresList));

  console.log(brochuresList);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<FORM>
  <INPUT id="chk1" type="checkbox" class="brochure-select-checkbox" value=1>
  <INPUT id="chk2" type="checkbox" class="brochure-select-checkbox" value=2>
  <INPUT id="chk3" type="checkbox" class="brochure-select-checkbox" value=3>
  <INPUT id="chk4" type="checkbox" class="brochure-select-checkbox" value=3>
</FORM>

Collectives™ on Stack Overflow

Javascript/jQuery - Pushing items to and removing from array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related