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

然而，我似乎有一些奇怪的行为。使用所有复选框＆＃39;取消选中＆＃39;，控制台将打印一个空数组，这是正确的。如果我然后单击列表中的第一个复选框，控制台仍然返回一个空数组 - 这是错误的。如果我单击另一个复选框，我会在数组中获得两个正确的复选框。任何人都可以在上面看到我出错了吗？

Answer 1

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

另外，我无法在此代码段上测试localstorage，它发出错误。

希望这会对你有所帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: