Rimuovere matrice da JavaScript oggetto

Question

Context

Sto cercando di implementare una funzione in modo che quando l'utente seleziona una casella di controllo di una tabella, l'attributo value e data-title della casella di controllo devono essere conservati in un JS oggetto letterale chiamato selected come un nuovo elemento di matrice coppie valore-chiave.

Nel caso in cui l'utente clicchi una seconda volta sulla stessa casella di controllo, l'elemento di matrice corrispondente deve essere rimosso.

emissione

La prima volta una casella viene cliccato, viene creato un array in oggetto selected come previsto.

Tuttavia, quando viene selezionata la stessa casella di controllo una seconda volta, invece di rimuovere la matrice corrispondente, una nuova (ripetuta) viene aggiunta.

Codice

var selected = {items:[]};  
$('#table').on('click', 'input[type="checkbox"]', function() { 
    var found = false; 
    $.each(selected.items, function(i, val) { 
     if (val.key == $(this).attr("value")) { 
      selected.items.splice(i ,1); 
      found = true; 
      return false; //step out of each() 
     } 
    }); 

    if (found == false) { 
     selected.items.push({key: $(this).attr("value"), value: $(this).attr("data-title")}); 
    } 

    console.log(selected); 
}); 

Answer 1

È un contesto errato di this all'interno each. non è più l'elemento nel gestore click

Prova

$('#table').on('click', 'input[type="checkbox"]', function() { 
    var found = false; 
    var value = $(this).val();// store value from `this` before entering `each` 
    $.each(selected.items, function(i, val) { 
     if (val.key == value) { 
      selected.items.splice(i ,1); 
      found = true; 
      return false; //step out of each() 
     } 
    }); 
    .... 

Answer 2

In primo luogo, mi sento di raccomandare di utilizzare un oggetto-valore-coppia di chiavi, in quanto è modo più semplice per le ricerche.

var selected = { items : {} }; 

questo modo si dovrebbe accedere agli elementi selezionati utilizzando

selected.items[my.key] 

forse somethink come questo ...

var selected = {items:{}};  
$('#table').on('change', 'input[type="checkbox"]', function() { 
    var checked = $(this).is(":checked"), 
     title = $(this).data("data-title"), 
     value = $(this).val(); 

    if (checked && !selected.items[value]) 
     selected.items[value] = title; 
    else if (!checked && !!selected.items[value]) 
     delete selected.items[value]; 
}); 

Answer 3

come circa questo:

var selected = { items:[] }; 

$('#table').on('click', 'input[type="checkbox"]', function() { 
    selected.items = $('#table input[type="checkbox"]:checked').map(function(){ 
     return { 
      key: $(this).attr('value'), 
      value: $(this).attr('data-title') 
     } 
    }).toArray() 
});