Warum werden diese Kontrollkästchenwerte umgekehrt?

Question

Ich habe eine Liste von Kontrollkästchen. Wenn die Seite geladen ist, werden einige überprüft, andere nicht. Wenn der Benutzer auf das Kontrollkästchen klickt, habe ich eine jQuery-Funktion, die überprüft, ob das ausgewählte Kontrollkästchen aktiviert ist oder nicht.

Das Problem ist, dass ich positive Ergebnisse bekomme, wenn das Kontrollkästchen nicht aktiviert ist, und umgekehrt. Hier ist ein Beispiel für die HTML:

<input type="checkbox" class="update-member"> 
<input type="checkbox" class="update-member" checked> 

Hier wird das javascript: ‚! Karo‘

updateMembership : function (e) { 
    e.preventDefault(); 
    if ($(this).prop('checked')) { 
     console.log('Checked!'); 
    } else { 
     console.log('NOT Checked'); 
    } 
} 

Zum Beispiel, wenn der Benutzer das erste Kontrollkästchen klickt, es sagt in der Konsole.

Vielleicht ist es mein Denken, das ist umgekehrt? Nicht das Javascript?

Answer 1

Diese Antwort ist ein wenig spekulativ, aber eine Erklärung für Ihre Beobachtungen ist, dass die Kontrollkästchen tatsächlich aus der Reihenfolge gerendert werden, von der Sie denken, dass sie verwendet wurde. Ihre Beobachtungen würden Sinn machen, wenn das Kästchen mit der Eigenschaft checked links (zuerst) erscheint und dasjenige ohne Eigenschaft auf der rechten Seite erscheint.

Wenn Sie uns Ihr CSS zeigen, können wir dies möglicherweise bestätigen, indem wir uns das Layout genauer ansehen.

Answer 2

denke ich, wenn Sie verwenden:

if ($(this).prop('checked')) 

... es true immer wieder, weil es sich als eine vorhandene Eigenschaft Berichterstattung und nicht, ob es aktiv geprüft wird oder nicht.

Das Snippet verwendet diese Bedingung:

if ($(this).is(':checked')) 

... es gibt einen boolean, die das Kontrollkästchen der Zustand des Seins :checked widerspiegelt. Nicht wirklich sicher, welche Verwendung e.preventDefault() würde Kontrollkästchen verwenden, also habe ich es entfernt.

SNIPPET

$('.update-member').on('click', updateMembership); 
 

 

 
function updateMembership(e) { 
 
    if ($(this).is(':checked')) { 
 
    console.log('Checked!'); 
 
    } else { 
 
    console.log('NOT Checked'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="update-member"> 
 
<input type="checkbox" class="update-member" checked>