javascript - 如何保存输入复选框值的存储数组？

Question

我有一个用作类别过滤器的输入复选框。我只想将那些在 var checkedAttr 中选中的输入复选框的值存储在数组中。然后做一个测试，如果任何已经存在的值匹配数组中的任何值，如果它确实删除它。我遇到的问题是......当一个输入复选框被点击时，它将存储它与 $each 循环或输入复选框一样多的次数，在这种情况下(三次).我还注意到，当取消选中多个，然后重新选中同一个时，它会添加与 $each 循环一样多的值，并且会以某种方式绕过从数组中删除。我只想在每次用户选中或取消选中时简单地从数组中添加(选中的值)/删除(未选中的值)。

这是一个 jsfiddle .

HTML:

<div id="category-list">
     <h1>Categories</h1>
     <input class="categories" type="checkbox" name="filter" value="Math" checked>Math<br/>
     <input class="categories" type="checkbox" name="filter" value="Science" checked>Science<br/>
     <input class="categories" type="checkbox" name="filter" value="Reading" checked>Reading
</div>

jQuery:

var checkedAttr = []; // array for checked attributes
// change event listener for whenever one or more of the following checkboxes have been checked/unchecked
$('#category-list :checkbox').change(function() 
{
    var value = $(this).val();
    if($(this).is(':checked')) // checked
    {
        console.log(value + ' is now checked!!!!!!!!!!!!!!!!!!!!!!!!');

        $('#category-list :checkbox').each(function(i, item){ // loop thru the input checkboxes
            if(!(value === $(item).val())) // check if the current value does NOT match that already stored in array
            {
                checkedAttr.push(value); // add value to array
                console.log("checkedAttr:", checkedAttr);
            }
            else // if it does match...
            {
                checkedAttr.splice(i, 1);// remove it from array  
                console.log("checkedAttr:", checkedAttr);
            }
        });

        // check which attributes are checked and store in 'checkedAttr' array
        //$('input[name=filter]').each(function(i, item){

        //});
    } 
    else // unchecked
    {
        console.log(value + ' is now unchecked!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
    }
});

Answer 1

检查它，兄弟，它的工作是否如你所愿

var checkedAttr = [];

$('#category-list :checkbox').change(function() 
{
    checkedAttr = [];
    $('#category-list :checkbox').each(function(i, item){
        if($(item).is(':checked'))
        {
            checkedAttr.push($(item).val()); 
        }
    });
   console.log("checkedAttr:", checkedAttr);
});

你也可以在 JSFiddle 中查看

https://jsfiddle.net/xdrLra77/