jquery複選框，如何獲取所有選中的複選框並將它們添加到數組？

Question

嗨，我有以下頁面：

<input type="checkbox" name="fruit1" id="1" class="box">Banana<br /><br /> 
<input type="checkbox" name="fruit2" id="2" class="box">Cherry<br /><br /> 
<input type="checkbox" name="fruit3" id="3" class="box">Strawberry<br /><br /> 
<input type="checkbox" name="fruit4" id="4" class="box">Orange<br /><br /> 
<input type="checkbox" name="fruit5" id="5" class="box">Peach<br /><br /> 
<input type="button" id="groupdelete" value="clickme"><br /> 

$(document).ready(function(){ 

$('#groupdelete').on('click', function(){ 
    var names = []; 
    $('input:checked').each(function() { 

     names.push($('input:checked').attr("name") + $('input:checked').attr('id')); 

}); 
    console.log(names); 
}) 

}) 

我所試圖做的是以下幾點：

要添加選中的複選框數組中。之後，我希望能夠通過php變量的值。

當我現在excecute的代碼，我得到的結果是這樣的：

[ 「fruit22」， 「fruit22」， 「fruit22」]

任何幫助將十分讚賞。

問候，Zoreli

Answer 1

您需要使用this而非'input:checked'的.each()函數內引用當前元素集合中被檢查。如果您重新使用選擇器，您將再次獲取該集合，那麼只會從該集合中的第一個元素獲取屬性。

$('input:checked').each(function() { 
    names.push($(this).attr("name") + this.id); 
}); 

Answer 2

你的HTML改爲

<input type="checkbox" name="fruits[]" id="1" class="box">Banana<br /><br /> 
<input type="checkbox" name="fruits[]" id="2" class="box">Cherry<br /><br /> 
<input type="checkbox" name="fruits[]" id="3" class="box">Strawberry<br /><br /> 
<input type="checkbox" name="fruits[]" id="4" class="box">Orange<br /><br /> 
<input type="checkbox" name="fruits[]" id="5" class="box">Peach<br /><br /> 
<input type="button" id="groupdelete" value="clickme"><br /> 

而現在，看的jQuery/JavaScript的

$(document).ready(function(){ 
    $('#groupdelete').click(function() { 
     var marked = new Array(); 
     var k = 0; 
     $('input:checked').each(function(index,value) { 
      marked[k] = value; 
      k++; 
     });   
     alert(marked[0].id); 
    }); 
}); 

警報只是給你演示通過訪問數組的索引直接訪問。