Geek Answers Handbook

JQuery Checkbox switches with a button that doesn’t work after several times

Can someone explain why the code fragment does not work after pressing the switch 3 times?

The checked attribute is still set to “checked,” but the browser no longer validates the checkbox.

$(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()); }); });

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

I tested it in both Opera and Chrome, with the same problem in both.

What am I missing here?

+7
source share
4 answers

for jQuery 1.9+, attr for properties will not work, you can simplify the checkbox switch, for example:

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

EDIT: see that !$("#chk").prop("checked") note that the first character that makes a boolean is the opposite of what it currently works, thus setting it to the opposite of what it is at present, no matter what that value is.

For explanation only, access to attr('checked') in jQuery 1.9+ gets the original attribute - which is part of the markup, and .prop("checked") accesses the current property value for this. Some things are still attributes, however this is the one that is the property and access to the properties via / since the attribute was deprecated and then removed in jQuery 1.9 / 2.0. In jQuery 1.6, they made changes, and in 1.6.1 they reverted some of these changes and abandoned attr() , although they still worked due to the 1.6.1 changes. 1.9+ then removed these usages. Think of the attribute as some string and the property as the current value. Your use of the attribute was available for this line, which has not changed, while the property has changed and, therefore, why .prop() works.

Also note that your use of the text / wrapper for the element (for debugging, which I assume) does not display the property, but only the "string" of the element that does not include the property, therefore, it does not change / be there in your "debug" so image, and you will need to add access to the property (true / false value) and add it also to get a visible representation of this value.

  • The attribute value reflects the default value (that it was in the markup at the beginning / at the first page), and not the current visible state and the actual value (in some older versions of IE). Thus, you see that the attributes do not say anything about whether the check box is selected.

For 1.9.1 on chrome:

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

(used to work before the change, it looks like an error)

EDIT2: wrong: irregular shape

 $("#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
+6
source 
 if($("#chk").is(":checked")) $("#chk").prop("checked", false); else $("#chk").prop("checked", true);

You must use .prop() , and the checked flag can also be specified using BOOLEAN.

+3
source 
 $(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()); }); });

hope this works for you.

0
source

The official decision - Muhammad Talha Akba:

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

0
source

More articles:


All Articles