Get Value von Toggle Checkbox in Semantic UI

Question

Ich habe eine Semantic UI Toggle-Option Setup in HTML wie diese

<div class="ui toggle mini checkbox"> 
    <input type="checkbox" name="myLayer"> 
    <label>myLayer</label> 
</div> 

Und ich möchte eine Aktion auszuführen, wenn das Kontrollkästchen entweder umgeschaltet oder untoggled ist. Im Moment habe ich dies geschrieben:

$('.ui.toggle').click(function() { 
    checked = $('.ui.toggle').is(':checked'); 
    console.log(checked); 
    if (checked === true) { 
     myLayer.show(); 
    } 
    else { 
     myLayer.hide(); 
    } 
}); 

Jedoch darf der Wert von checked ist immer false, egal ob das Toggle ein- oder ausgeschaltet ist! Warum ist das der Fall?

Answer 1

Der Selektor '.ui.toggle' referenziert den übergeordneten Container Ihrer Eingabe. Der rechte Selektor wäre '.ui.toggle input'. Dann sollten Sie auch einen ändernden Wert für Ihre Variable erhalten.

Da Sie bereits im Click-Handler sind, wäre es noch besser, auf diese Weise nach Ihrer Eingabe zu suchen: $(this).find('input').is(':checked'). Auf diese Weise muss jQuery die gesamte DOM-Struktur nicht noch einmal analysieren, um den Eingabe-Kind-Knoten zu finden.

Answer 2

Es wäre besser, wenn Sie mit Semantic Ihre Checkbox init wie folgt: Sie können immer den Wert Ihrer Checkbox mit .checkbox('is checked') oder .checkbox('is unchecked')

$('.ui.toggle').checkbox({ 
    onChecked: function() { myLayer.show(); }, 
    onUnchecked: function() { myLayer.hide(); } 
}); 

Natürlich lesen. Um den Wert lesen zu können, muss Ihr Kontrollkästchen mit $('.ui.toggle').checkbox() initialisiert werden.

Zum Beispiel dieser Code macht das gleiche wie das Segment an der Spitze meiner Antwort:

$('.ui.toggle').checkbox(); 

$('.ui.toggle').click(function() { 
    if ($('.ui.toggle').checkbox('is checked') { 
     myLayer.show(); 
    } 
    else { 
     myLayer.hide(); 
    } 
});