Przełącznik JQuery Checkbox z przyciskiem nie działa po kilkukrotnych próbach

Question

Czy ktoś może wyjaśnić, dlaczego fragment kodu nie działa po naciśnięciu przełącznika 3 razy?

Sprawdzony atrybut jest nadal ustawiony na "zaznaczony", ale przeglądarka nie sprawdza już tego pola wyboru.

$(document).ready(function() { 

    $("#btn").click(function() { 

    if($("#chk").is(":checked")) 
     $("#chk").removeAttr("checked"); 
    else 
     $("#chk").attr("checked","checked"); 

    $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html()); 
    }); 
}); 

Zobacz http://jsbin.com/ewawih/2/edit

Przetestowałem go zarówno na Opera i Chrome, z tym samym problemem w obu.

Czego mi tu brakuje?

Answer 1

dla jQuery 1.9+, atr dla właściwości nie będzie działać, można uprościć przegubowe o pole wyboru takich jak:

$("#btn").click(function() { 
     $("#chk").prop("checked",!$("#chk").prop("checked")); 
     $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html()); 
    }); 

EDIT: zobaczyć, że : !$("#chk").prop("checked") Zauważ, że pierwszy znak, który sprawia, że ​​wartość boolowska jest przeciwieństwem tego, co aktualnie jest, dlatego przełącznik działa, ustawiając go na przeciwną do tego, co aktualnie jest, bez względu na to, jaka jest ta wartość.

Dla wyjaśnienia, dostęp do attr('checked') w jQuery 1.9+ dostaje oryginalny atrybut - który jest częścią znacznika, podczas gdy .prop("checked") uzyskuje dostęp do bieżącej wartości właściwości. Niektóre rzeczy są nadal atrybutami, jednak jest to właściwość i dostęp do właściwości poprzez/as atrybut został wycofany, a następnie usunięty w jQuery 1.9/2.0. W jQuery 1.6 wprowadzono zmiany, a w wersji 1.6.1 cofnięto niektóre z tych zmian i wycofano attr(), mimo że nadal działało z powodu zmiany 1.6.1. 1.9+ usunęło te zastosowania. Pomyśl o atrybucie jako o jakimś ciągu i o właściwości jako bieżącej wartości. Używanie tego atrybutu było uzyskiwanie dostępu do tego ciągu znaków, który nie ulegał zmianie, podczas gdy właściwość zmieniła się, a co za tym idzie, dlaczego działa .prop().

Należy również zauważyć, że użycie tekstu/zawijania do elementu (dla debugowania zakładam) nie pokazuje właściwości, ale tylko "ciąg" elementu, który nie zawiera właściwości - dlatego wydaje się nie zmieniać/bądź w twoim "debugowaniu" w ten sposób, a twój będzie musiał dodać dostęp do właściwości (wartość true/false) i dołączyć ją również, aby uzyskać widoczną reprezentację tej wartości.

• Wartość atrybutu odzwierciedla wartość domyślną (jaka była w znaczniku na początku/kiedy strona była renderowana po raz pierwszy), a nie aktualny stan widoczny i wartość rzeczywista (niektóre starsze wersje IE różnią się). Dzięki temu atrybuty nic nie mówią o tym, czy pole wyboru jest zaznaczone.

Dla wersji 1.9.1 na chrome:

$("#chk").checked //returns undefined 

(pracował przed zmieni, czuje się jak bug)

Edit2: źle: nieprawidłową formę

$("#chk")[0].checked // proper form works 
$("#chk").get(0).checked // same as above, works 
document.getElementById("chk").getAttribute("checked") // returns "checked" or null or "true" or "fun" or empty "" if it was set thay way, attribute present checks box 
$("#chk").is(":checked") // returns true/false current value 
$("#chk").attr("checked") // returns "checked" or undefined does not change 
document.getElementById("chk").defaultChecked // returns true/false of original, does not change 
$("#chk").prop("checked") // returns current value true/false 
document.getElementById("chk").checked //returns current value true/false 
$("#chk").is("[checked]") // attribute selector returns original value, does not change 

Answer 2

if($("#chk").is(":checked")) 
    $("#chk").prop("checked", false); 
else 
    $("#chk").prop("checked", true); 

Należy użyć .prop() a także sprawdzane można również określić z Boolean.

Answer 3

$(document).ready(function() { 

    $("#btn").click(function() { 

    if($("#chk").attr('checked')=='checked') 
     $("#chk").removeAttr("checked"); 
    else 
     $("#chk").attr("checked","checked"); 

    $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html()); 
    }); 
}); 

nadzieję, że będzie pracować dla Ciebie

Answer 4

Dziennik rozwiązaniem jest Muhammad Talha Akba:

http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-