javascript - 几次后 JQuery 复选框切换按钮不起作用

Question

谁能解释为什么按 3 次切换后代码片段不起作用？

checked 属性仍设置为“已选中”，但浏览器不再选中该复选框。

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

参见 http://jsbin.com/ewawih/2/edit

我已经在 Opera 和 Chrome 上测试过，两者都存在同样的问题。

我在这里错过了什么？

Answer 1

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

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

编辑:看到:!$("#chk").prop("checked") 注意使 bool 值与当前值相反的第一个字符，因此切换通过将其设置为与当前值相反的值来工作，无论该值是什么。

仅作说明，在 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() 有效。

另请注意，您对元素使用 text/wrap(我假设是为了调试)不显示该属性，而只显示不包含该属性的元素的“字符串”-因此它似乎没有更改/以这种方式出现在您的“调试”中，您需要添加对该属性的访问权限(真/假值)并附加它以获得该值的可见表示。

• 属性值反射(reflect)默认值(它在开始时/页面首次呈现时标记中的内容)而不是当前可见状态和实际值(某些旧版本的 IE 不同)。因此，您看到的属性不会告诉您有关复选框是否被选中的任何信息。

对于 chrome 上的 1.9.1:

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

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

EDIT2:错误:形式不正确

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