更新陣列基於檢查和取消選中使用jQuery複選框

Question

我有以下一段代碼，當檢查複選框時，將值推入數組。

var complaintIds = []; 

function select_tickets() { 
$(".take_tickets").css('display', 'block'); 
var id = $(this).data("id"); 
complaintIds.push(id); 
} 

$('body').on('click', '.select_ticket', select_tickets); 

但是我不能，如果選中的複選框取消選中從陣列中刪除值。除此之外，再次添加相同的值。

有人可以告訴我我做錯了什麼嗎？

謝謝。

Answer 1

試試這個

var complaintIds = []; 

function select_tickets(el) { 
$(".take_tickets").css('display', 'block'); 
var id = $(el).data("id"); 
if(el.checked){ 
    complaintIds.push(id); 
}else{ 
    complaintIds = $.grep(complaintIds, function(value) { return value !== id; }); // remove id from array if unchecked 
} 
console.log(complaintIds); 
} 

$('body').on('change', '.select_ticket', function(){select_tickets(this)}); 

演示

var complaintIds = []; 
 
function select_tickets(el) { 
 
$(".take_tickets").css('display', 'block'); 
 
var id = $(el).data("id"); 
 
if(el.checked){ 
 
    complaintIds.push(id); 
 
}else{ 
 
    complaintIds = $.grep(complaintIds, function(value) { return value !== id; }); // remove id from array if unchecked 
 
} 
 
console.log(complaintIds); 
 
} 
 

 
$('body').on('change', '.select_ticket', function(){select_tickets(this)});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="select_ticket" data-id="id1" /> 
 
<input type="checkbox" class="select_ticket" data-id="id2" /> 
 
<input type="checkbox" class="select_ticket" data-id="id3" /> 
 
<input type="checkbox" class="select_ticket" data-id="id4" /> 
 
<input type="checkbox" class="select_ticket" data-id="id5" />

Answer 2

本應該做的工作：

var complaintIds = []; 


    $(document).on('change', '.select_ticket', function(){ 
     $(".take_tickets").css('display', 'block'); 
     var id = $(this).data("id"); 
     if($(this).is(":checked")) 
     { 
      complaintIds.push(id); 
     } 
     else 
     { 
      new_list = complaintIds.filter(function(item){ 
      return item != id; 
      }); 
       complaintIds = new_list; 
     } 
     console.log(complaintIds); 
    }); 

小提琴來測試它 https://jsfiddle.net/2L38x4u9/