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

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/

Answer 2

使用$.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 3

编辑

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 4

你可以简单地用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 5

你可以通过使用$（'。categories ：检查“）。然后，你可以通过这些值重复，以获得实际值

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

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