Element aus Array entfernen, wenn Kontrollkästchen deaktiviert ist

Question

Ich füge ein Element zu einem Array hinzu, wenn das Kontrollkästchen aktiviert ist und ich es entfernen muss, wenn es nicht markiert ist. Ich benutze Spleiß, um ein Element zu entfernen. Ich kann einfach kein Ereignis aufrufen, wenn es nicht aktiviert ist. Ich habe versucht, mit dieser:

if ($('input[name="'+category+'"]:checked')) 
    item_id[category] = $(this).attr("id"); 
else 
    item_id.splice(category, 1); 

Es fügt das benötigte Element ok, wenn das Kontrollkästchen aktiviert ist, aber es scheint nicht, es zu entfernen, wenn es nicht aktiviert ist. Variable Kategorie ist eine Schleifenvariable und ist korrekt.

Wenn jemand dies erarbeiten kann, würde es sehr geschätzt werden.

Answer 1

Nicht ganz sicher, was Sie nach, ehrlich zu sein, aber hier meine Lösung ist, hoffen, dass es für Sie in irgendeiner Weise arbeitet

Javascript Array - indexOf Methode: http://www.tutorialspoint.com/javascript/array_indexof.htm

<script> 

if (!Array.prototype.indexOf) 
{ 
    Array.prototype.indexOf = function(elt /*, from*/) 
    { 
    var len = this.length; 

    var from = Number(arguments[1]) || 0; 
    from = (from < 0) 
     ? Math.ceil(from) 
     : Math.floor(from); 
    if (from < 0) 
     from += len; 

    for (; from < len; from++) 
    { 
     if (from in this && 
      this[from] === elt) 
     return from; 
    } 
    return -1; 
    }; 
} 

$(function() { 

    var checkedItems = new Array(); 

    $(":checkbox").change(function() { 
     if($(this).attr('checked')) 
     { 
     checkedItems.push($(this).attr("id")); 
     } 
     else 
     { 
     var index = checkedItems.indexOf($(this).attr("id")); 
     checkedItems.splice(index,1); 
     } 
    }); 

}); 
</script> 

HTML

<input type="checkbox" id="c1" value="1"> 
<input type="checkbox" id="c2" value="2"> 
<input type="checkbox" id="c3" value="3"> 

Answer 2

Die Funktion splice soll zurückgeben, was entfernt wurde. Starten Sie das Debuggen, indem Sie den Rückgabewert anzeigen.

Answer 3

jQuery-Selektoren geben immer ein Objekt zurück, ob ein Element übereinstimmt oder nicht.

Was Sie effektiv haben, ist:

if (new Object()) 
    item_id[category] = $(this).attr("id"); 
else 
    item_id.splice(category, 1); 

Objekte sind immer truthy (egal ob es sich um ein leeres Objekt ist, oder ein Objekt John Resig initialisiert), so dass diese if Anweisung wird nie die else auszuführen.

Was sind Sie wahrscheinlich nach its:

if ($('input[name="'+category+'"]:checked').length) 
    item_id[category] = $(this).attr("id"); 
else 
    item_id.splice(category, 1); 

, die die length Eigenschaft stattdessen überprüft.

Dies funktioniert jedoch immer noch nicht, da splice() alle Elemente in Ihrem Array verschiebt; die category falsch machen.

Wenn Sie das Ereignis an eine Anzahl von Checkbox-Elementen binden, ist es unklug, .bind() (und seine Gegenstücke .click()) zu verwenden, da diese Methode ein Ereignis für jedes Kontrollkästchen bindet. Verwenden Sie stattdessen .live() oder .delegate(); Dies bindet ein Ereignis an einen Vorfahren aller Checkbox-Elemente, und auf Ereignis (mit JavaScripts Event Bubbling), die viel effizienter ist.

Wenn Sie diese beiden Punkte in Betracht ziehen, können Sie sich so etwas vorstellen.

$(yourJquerySelector).live('change', function() { 
    var category = '?' // (this.value ?) 

    item_id[category] = this.checked ? this.id : undefined; 
}); 

Answer 4

Ihr, wenn die Bedingung ändern:

$('input[name="'+category+'"]').is(':checked') 

Wie von Matt erwähnt, Ihre aktuelle, wenn die Bedingung ein Selektor ist, die eine Liste von jQuery Elemente zurückgibt. Das Testen der Anzahl der zurückgegebenen Elemente (mit der length -Eigenschaft) würde ebenfalls den Zweck erfüllen.