Jede Checkbox erscheint zweimal

Question

ein:

• jQuery 3.2.1
• Semantic UI 2.1
• Chrome

HTML (basierend auf https://semantic-ui.com/modules/checkbox.html#/definition):

<div id="checkboxes"> 
    <div class="ui checkbox"> 
     <input type="checkbox" name="checkboxes" value="checkbox1"> 
     <label>Branch</label> 
    </div> 
    <div class="ui checkbox"> 
     <input type="checkbox" name="checkboxes" value="checkbox2"> 
     <label>Branch</label> 
    </div> 
    <div class="ui checkbox"> 
     <input type="checkbox" name="checkboxes" value="checkbox3"> 
     <label>Branch</label> 
    </div> 
    ... 
</div> 

* Sie sind alle zunächst überprüft. ** Der Benutzer deaktiviert diejenigen, die sie deaktivieren möchten.

In meiner JS-Datei, ich die folgende Funktion zu erhalten, welche Kontrollkästchen aktiviert sind:

$('input:checkbox[name=checkboxes]:checked').each(function() { 
     // Do something with them 
    }); 

jedoch jede Checkbox erscheint zweimal (einmal im Neuzustand - aktiviert oder deaktiviert, und einmal im Originalzustand - alles geprüft). Dies verwirrt meine Logik danach und macht das Häkchen sinnlos.

Ich ging in Chrome Developer Tools und verwendete den gleichen Selektor in der Konsole. Haben Sie dies zurück:

input#checkbox2, input#checkbox3, input#checkbox1, input#checkbox2, input#checkbox3

(ich hatte nicht markiert checkbox1)

Irgendwelche Ideen auf, warum es zweimal auftauchen würde, oder was ich hier fehlt?

Answer 1

Also, nach vielen Headbanging, das Problem herausgefunden zu bekommen. Meine Antwort ist hier für die Nachwelt:

Dies ist ein Nebenprodukt der Verwendung von Semantic/die Art und Weise Semantic Werke

Ursache

Diese Kontrollkästchen in einem modalen waren. Wenn Semantic ein Modal initialisiert, erstellt es eine Kopie aller Elemente und fügt sie an dem Ende des DOM hinzu.

^Dies führt dazu, dass zwei Kopien erscheinen, wie in meinem Problem.

Bei der Suche nach ID wird die letzte Kopie eines DOM-Elements mit dieser ID verwendet; Alle Änderungen, die ich mache (checking/un-checking), werden auf der Kopie passieren, nicht das Original.

Hinweis: Dies gilt auch für Semantic Dropdowns in Modals.

Lösung

Setzen Sie Ihre Kontrollkästchen (oder Dropdown-Listen) in eine div, und es eine ID geben, wie mein Original-Code oben.

<div id="my_checkboxes"> 
    <div class="ui checkbox"> 
     <input type="checkbox" name="checkboxes" value="checkbox1"> 
     <label>Branch</label> 
    </div> 
</div> 

Anstatt jedoch mit Bezug auf sie input und name verwenden, lesen Sie sie mit diesem übergeordneten div:

$('#my_checkboxes').children().each(function() { 
    // do something 
}); 

Answer 2

Sie können die folgenden Verfahren verwenden die überprüften Kontrollkästchen

$('#checkboxes input:checked').each(function() { 
    console.log($(this)) 
});