JQuery复选框切换与按钮不工作几次后 [英] JQuery Checkbox toggle with button not working after few times

问题描述

检查的属性仍设置为已检查，但浏览器没有

  $（document）.ready（function（）{
 
 $（ #btn）。click（function（）{
 
 if（$（＃chk）。is（：checked））
 $（＃chk）。 removeAttr（checked）; 
 else 
 $（＃chk）。attr（checked，checked）; 
 
 $（＃lbldebug） 。）（）; 
}）; 
}）; .text（$（＃chk）。clone（）。wrap（'< p> 
  

请参阅 http://jsbin.com/ewawih/2/edit

我已经在Opera和Chrome上测试过它，同样的问题。

我在这里丢失了什么？

解决方案

对于jQuery 1.9+，属性attr不起作用，可以简化复选框的切换，如：

  $（ （＃cht）。prop（check））; 
（） $（＃lbldebug）。text（$（＃chk）。clone（）。wrap（'< p>）。parent（）。html（））; 
}）; 
  

编辑：看到：！$（＃chk）。prop （checked）注意到第一个字符使布尔值与当前的布尔值相反，因此切换的工作方式是将其设置为与当前所在的相反，无论该值为多少是的。

仅仅为了解释，在jQuery 1.9+中访问 attr（'checked'）属性 - 这是标记的一部分，而 .prop（checked）访问当前属性值。有些东西仍然是属性，但是这是一个属性，通过/作为属性访问属性已被弃用，然后在jQuery 1.9 / 2.0中删除。在jQuery 1.6中，他们进行了更改，在1.6.1中，他们还原了其中的一些更改并且不推荐使用 attr（），尽管由于1.6.1更改而仍然有效。 1.9+然后删除这些用法。将属性看作一些字符串，将属性看作当前值。您对该属性的使用是访问那个没有改变的字符串，而属性确实发生了变化，因此 .prop（）有效。

另外请注意，您使用元素的文本/换行（对于我所假设的调试）不会显示属性，而只会显示不包含该属性的元素的字符串 - 因此它看起来不是通过这种方式改变/存在于你的调试中，你需要添加对属性的访问（真/假值）并追加这个值，以获得该值的可见表示。

• 属性值反映了默认值（它在开始时的标记/页面第一次呈现时的值），而不是当前的可见状态和实际值IE不同）。因此，您看到的属性并不会告诉您该复选框是否被选中。

1.9.1在chrome上：

  $（＃chk）。checked // returns undefined 
  

$ b

（用于改变之前的工作，感觉就像一个bug）

EDIT2：错误：表单不正确

  $（＃chk）[0 ] .checked //正确的形式工作
 $（＃chk）。get（0）.checked //与上面相同，工作
 document.getElementById（chk）。getAttribute（checked ）//返回checked或者null或者true或者fun或者空，如果它是以这种方式设置的话，那么属性存在复选框
 $（＃chk）。is（：checked ）//返回true / false当前值
 $（＃chk）。attr（checked）//返回checked或undefined不会改变
 document.getElementById（chk ）.defaultChecked //返回原/真，不改变
 $（＃chk）。prop（checked）//返回当前值true / false 
 document.getElementById（chk）。checked //返回当前值true / false 
 $（＃chk）。is（[checked]）//属性选择器返回原始值，不改变
  

Can anyone explain why the code fragment does not work after pressing toggle 3 times?

The attribute checked is still set to "checked" but the browser doesn't check the checkbox anymore.

$(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've tested it both on Opera and Chrome, with the same problem in both.

What am I missing here?

解决方案

for jQuery 1.9+, attr for properties will not work, you can simplify a toggle of a checkbox like:

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

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

Just for an explanation, accessing the attr('checked') in jQuery 1.9+ gets the original attribute - which is a part of the markup, while the .prop("checked") accesses the current property value for that. Some things are still attributes, however this is one that is a property and access to properties through/as an 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 those changes and deprecated the attr() even though it still worked due to those 1.6.1 change. 1.9+ then removed those usages. Think of an attribute as some string, and a property as a current value. Your use of the the attribute was accessing that string which did not change whereas the property did change and hence why .prop() works.

Also note that your use of the text/wrap for the element (for debug I assume) does not show the property but only the "string" of the element which does not include the property - hence it appears not to change/be there in your "debug" this way and your would need to add access to the property (a true/false value) and append that also to get a visible representation of that value.

• The attribute value reflects the default (what it was in markup at the beginning/when the page first rendered) rather than the current visible state and actual value (some older versions of IE differ). Thus you see attributes tell you nothing about the whether the checkbox is checked.

For 1.9.1 on chrome:

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

(used to work prior to change, feels like a bug)

EDIT2:wrong:incorrect 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

这篇关于JQuery复选框切换与按钮不工作几次后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！