CODEWITHSUNDEEP
javascriptjqueryarrayscheckbox
wickywills
wickywills

Reputation: 4204

Javascript/jQuery - Pushing items to and removing from array

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?

Upvotes: 1

Views: 70

Answers (1)

Niloct
Niloct

Reputation: 10005

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>

Upvotes: 1

Related Questions