JS .checked vs jquery attr ('checked'), qual è la differenza?

Question

Non riesco a capirlo. In base a W3 Schools, , la proprietà selezionata imposta o restituisce lo stato selezionato di una casella di controllo.

Quindi perché $('input').checked ? $('div').slideDown() : $('div').slideUp(); non funziona?

Tuttavia, l'utilizzo dell'elica funziona.

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

Questo è per una casella di controllo che viene controllato sulla base di un valore del database.

Answer 1

checked è una proprietà di elemento DOM, quindi utilizzarlo su elementi DOM anziché su oggetti jQuery.

$('input')[0].checked 

se si dispone di un oggetto jQuery, utilizzare prop invece di attr dal momento che si sta verificando una proprietà. Proprio come un riferimento:

$("<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 

Mentre [0].getAttribute("checked") restituirà il valore effettivo.

prop tornerà true o false sulla base se l'attributo esiste a tutti i

Answer 2

checked è una proprietà dell'oggetto DOM, non dell'oggetto jQuery. Per farlo funzionare, dovreste ottenere l'oggetto DOM:

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

Si potrebbe anche fare .is(':checked').

Answer 3

$ ('input') restituisce un oggetto jQuery e non ha proprietà checked. Puoi usare $ ('input') [0] .checked.

Answer 4

$('input').attr('checked') è obsoleto e si dovrebbe usare $('input').prop('checked')
Inoltre, $('input').checked non funzionerà come $('input') è l'oggetto jQuery e checked è la proprietà in modo che è il motivo per jQuery ha messo a punto $('input').prop('checked') per accedere alla proprietà.

Tuttavia per convertire oggetto jQuery per DOM devi fare
$('input')[0].checked questo diventa l'oggetto DOM e quindi è possibile accedere alla proprietà direttamente con .

Ma con jQuery per accedere alla proprietà si dovrebbe usare questo:

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

Spero che questo aiuti !!

Answer 5

In questo caso è necessario prop() piuttosto che attr(), chiamate sostituzione a attr() con prop() nel codice generalmente funzionerà.

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

La differenza tra attributi e proprietà possono essere importante in situazioni particolari. Prima di jQuery 1.6, il metodo .attr() talvolta prendeva in considerazione i valori delle proprietà durante il recupero di alcuni attributi, il che poteva causare un comportamento incoerente. A partire da jQuery 1.6, il metodo .prop() fornisce un modo per recuperare esplicitamente i valori delle proprietà, mentre .attr() recupera gli attributi.

elem.checked ==== true (Boolean) cambierà con lo stato casella

$(elem).prop("checked") ==== true (Boolean) cambierà con lo stato casella

elem.getAttribute("checked") ===== "checked" (String) Stato iniziale della casella di controllo; non cambia

$(elem).attr("checked") (1.6) ===== "checked" (String) Stato iniziale della casella di controllo; non cambia

$(elem).attr("checked") (1.6.1+) ======== "checked" (String) cambierà con lo stato casella

$(elem).attr("checked") (pre-1.6) ======= true (Boolean) Modificato con lo stato casella

Anche questo URL vi aiuterà di più circa le vostre domande .prop() vs .attr()

Una differenza di /is-checked-vs-attr-checked-checked/7 su http://jsperf.com/is-checked-vs-attr-checked-checked/7

anche per capire 0.123.riferiscono http://christierney.com/2011/05/06/understanding-jquery-1-6s-dom-attribute-and-properties/ http://jsperf.com/is-checked-vs-attr-checked-checked/7