JS .checked vs jquery attr ('geprüft'), was ist der Unterschied?

Question

Ich kann das nicht herausfinden. Gemäß W3 Schools, setzt oder aktiviert die checked-Eigenschaft den aktivierten Status eines Kontrollkästchens.

Warum funktioniert $('input').checked ? $('div').slideDown() : $('div').slideUp(); nicht?

Die Verwendung von Prop jedoch funktioniert.

$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp();

Dies ist für eine Checkbox, die basierend auf einer Datenbank Wert überprüft wird.

Answer 1

checked ist eine DOM-Elementeigenschaft, also verwenden Sie sie für DOM-Elemente anstelle von jQuery-Objekten.

$('input')[0].checked 

, wenn Sie ein jQuery-Objekt haben, verwenden Sie prop statt attr da Sie eine Immobilie zu überprüfen. Nur als Referenz:

$("<input type='checkbox' checked='checked'>").attr("checked") // "checked" 
$("<input type='checkbox' checked='foo'>").attr("checked") // "checked" 
$("<input type='checkbox' checked>").attr("checked") // "checked" 
$("<input type='checkbox'>").attr("checked") // undefined 

Während [0].getAttribute("checked") den tatsächlichen Wert zurück.

prop kehrt true oder false basierend auf, ob das Attribut existiert auf allen

Answer 2

checked ist eine Eigenschaft des DOM-Objekts, nicht des jQuery-Objekts. Damit es funktioniert, dann würden Sie das DOM-Objekt erhalten müssen:

$('input')[0].checked; 

Sie könnten auch .is(':checked') tun.

Answer 3

$ (‚input‘) gibt eine JQuery-Objekt und es muss nicht geprüft Eigenschaft. Sie können $ ('input') [0] .checked verwenden.

Answer 4

$('input').attr('checked') ist veraltet und man sollte $('input').prop('checked')
Außerdem verwenden, $('input').checked wird nicht funktionieren, wie $('input') das Objekt jquery und checked ist die Eigenschaft, so dass Deshalb jquery hat mit $('input').prop('checked') kommen auf die Eigenschaft zugreifen.

jedoch jQuery-Objekt DOM zu konvertieren Objekt Sie
$('input')[0].checked dies wird das DOM-Objekt tun müssen, und dann können Sie die Eigenschaft mit . direkt

Aber mit jquery Zugriff auf die Eigenschaft zuzugreifen man dies nutzen sollten:

$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp(); 

Hoffe, das hilft !!

Answer 5

In diesem Fall müssen Sie prop() statt attr(), Anrufe attr() mit prop() im Code ersetzt wird in der Regel arbeiten.

Vonhttp://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/

Der Unterschied zwischen den Attributen und Eigenschaften kann in bestimmten Situationen wichtig sein. Vor jQuery 1.6 hat die Methode .attr() bei der Abfrage einiger Attribute manchmal Eigenschaftswerte berücksichtigt, was zu inkonsistentem Verhalten führen konnte. Ab jQuery 1.6 bietet die .prop()-Methode eine Möglichkeit zum expliziten Abrufen von Eigenschaftswerten, während .attr() Attribute abruft.

elem.checked ==== true (Boolean) Wird mit Checkbox Zustand ändern

$(elem).prop("checked") ==== true (Boolean) Wird mit Checkbox Zustand

elem.getAttribute("checked") ===== "checked" (String) Anfangszustand der Checkbox ändern; ändert sich nicht

===== "checked" (String) Ausgangszustand des Kontrollkästchens; ändert sich nicht

$(elem).attr("checked") (1.6.1+) ======== "checked" (String) Wird mit Checkbox Zustand ändern

$(elem).attr("checked") (pre-1.6) ======= true (Boolean) Changed mit Checkbox Zustand

Auch wird diese URL Ihnen helfen über Ihre Anfragen .prop() vs .attr()

Ein Unterschied von /is-checked-vs-attr-checked-checked/7 auf http://jsperf.com/is-checked-vs-attr-checked-checked/7

auch 0.123.029 zu verstehensiehe http://christierney.com/2011/05/06/understanding-jquery-1-6s-dom-attribute-and-properties/ http://jsperf.com/is-checked-vs-attr-checked-checked/7