JQuery Checkbox切换按钮几次后无法工作

dra*_*707 7 html javascript jquery

任何人都可以解释为什么在按下切换3次后代码片段不起作用?

选中的属性仍设置为"已选中",但浏览器不再选中该复选框.

$(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());
  });
});
Run Code Online (Sandbox Code Playgroud)

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

我在Opera和Chrome上都测试了它,两者都有同样的问题.

我在这里错过了什么?

Mar*_*iss 7

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

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

编辑:请注意:!$("#chk").prop("checked")注意第一个使布尔值与当前值相反的字符,因此切换的工作方式是将其设置为与当前值相反的值,无论该值是什么.

只是为了解释,访问attr('checked')jQuery 1.9+获取原始属性 - 这是标记的一部分,而.prop("checked")访问当前属性值.有些东西仍然是属性,但是这是一个属性,并且通过/作为属性访问属性已被弃用,然后在jQuery 1.9/2.0中被删除.在jQuery 1.6中,他们进行了更改,在1.6.1中,他们还原了一些更改并弃用了它们attr(),尽管它仍然有效,因为这些1.6.1更改.1.9+然后删除了这些用法.将属性视为一些字符串,将属性视为当前值.您对该属性的使用是访问该字符串,该字符串没有更改,而该属性确实发生了变化,因此可行.prop().

另请注意,您对元素的文本/换行的使用(对于我假设的调试)不显示属性,而只显示不包含属性的元素的"字符串" - 因此它似乎不会更改/存在于你的"调试"这种方式,你需要添加对属性的访问权限(一个真/假值),并附加它以获得该值的可见表示.

  • 属性值反映默认值(在开始时/首次呈现页面时的标记内容),而不是当前可见状态和实际值(IE的某些旧版本不同).因此,您看到属性不会告诉您是否选中了复选框.

对于Chrome的1.9.1:

$("#chk").checked //returns undefined
Run Code Online (Sandbox Code Playgroud)

(以前在变化之前工作,感觉就像一个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
Run Code Online (Sandbox Code Playgroud)