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 = []; // array for checked attributes

//first load, see what is checked
$('#category-list :checkbox').each(function(){
 if($(this).is(':checked')) // checked
 checkedAttr.push($(this).val())
})


// 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();
var position = checkedAttr.indexOf($(this).val());

if($(this).is(':checked')) // checked
{
    if(position == -1){ // dnot exist in array, add
        checkedAttr.push($(this).val());
      console.log("checkedAttr:", checkedAttr);
    }else{ // exist in array, do nothing
        //do nothing
   }
   console.log(value + ' is now checked!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
} 
else // unchecked
{
    if(position == -1){ // dont exist in array, do nothing
        //do nothing
    }else{ // exist in array, remove
        checkedAttr.splice(position,1);
        console.log("checkedAttr:", checkedAttr);
    }

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

Answer 2

您只需使用map电话

即可

var checkedAttr = [];

$('#category-list :checkbox').change(function() {
    checkedAttr = $('#category-list :checked').map(function(){
        return $(this).val();
    }).get();

    console.log(checkedAttr);
});

（Updated jFiddle）

（编辑：更好的是，将条件放在jQuery选择器中）

Answer 3

检查兄弟的工作是否正常

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/

Answer 4

使用$.inArray：

if (index === -1  && $(this).is(':checked')) {

    checkedAttr.push(value); // add value to array
    console.log("added:", checkedAttr);

 } else if (index !== -1 && ! $(this).is(':checked')) {

    checkedAttr.splice(index, 1);// remove it from array                
    console.log("removed:", checkedAttr);

}

修改过的小提琴：https://jsfiddle.net/o1rmz1o1/4/

Answer 5

您可以使用$（＆＃39; .categories：checked＆＃39;）来获取已选中的元素。然后，您可以遍历这些值以获取实际值

var checkedValues= $('.categories:checked');

var valuesArray=[];
$.each(checkedValues, function(checkedValue){
valuesArray.push(checkedValue.value)
}

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

5 个答案: