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

我目前有一个复选框列表，分布在多个页面（分页）中，其值需要存储在本地存储中，以便我可以将它们全部列在其他地方页。因此，我试图将所有这些值存储在数组中，并根据是否单击复选框来不断更新该数组。Javascript/jQuery - 将项目推送到数组并将其从数组中移除

我目前使用下列内容：

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

但是我似乎有一些奇怪的行为。在所有复选框未选中的情况下，控制台将打印一个空数组，这是正确的。如果我然后单击列表中的第一个复选框，控制台仍然返回一个空数组 - 这是错误的。如果我点击另一个复选框，我会在数组中找到两个正确的复选框。任何人都可以在上面看到我要出错吗？

来源

2017-09-06 wickywills

对于开球使用'change'而不是'click'读取复选框事件。 – Utkanos

@Utkanos啊......我只能说这是一天的工作！谢谢。 – wickywills

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

此外，我无法测试这个片段上的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>

来源

2017-09-06 17:56:20 Niloct

谢谢你 - 让我回到正轨！ – wickywills

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

回答

相关问题