如何保存輸入複選框值的存儲數組？

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