Javascript/jQuery - 将项目推送到数组并从数组中删除

Question

我目前有一个分布在多个页面上的复选框列表（分页），其值需要存储在本地存储中，以便我可以在另一个页面的其他位置列出它们。因此，我尝试将所有这些值存储在一个数组中，并通过添加/删除值来不断更新该数组，具体取决于是否已单击复选框。

我目前正在使用以下内容：

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);
    });

但是我似乎有一些奇怪的行为。在所有复选框“未选中”的情况下，控制台打印一个空数组，这是正确的。如果我然后单击列表中的第一个复选框，控制台仍然返回一个空数组 - 这是错误的。如果我单击另一个复选框，我会在数组中得到两个正确的复选框。谁能在上面看到我哪里出错了？

Answer 1

这是我的尝试。您的问题不清楚如何处理复选框上的重复值。我只是假设您要选中和取消选中与您单击的成员具有相同值的每个成员。

另外，我无法在这个 sn-p 上测试 localstorage，它发出了错误。

希望对你有所帮助。

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>