Question

有人可以解释为什么在按下切换按钮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());
  });
});

请参阅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")注意到第一个字符使布尔值与当前的布尔值相反，因此切换的工作原理是将其设置为与当前相反，无论是什么价值是。

只是为了解释，访问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的某些旧版本不同）。因此，您看到属性不会告诉您是否选中了复选框。

关于chrome的1.9.1：

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

~~（用于在更改之前工作，感觉就像一个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

Answer 2

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

您应该使用.prop()并且也可以使用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());
  });
});

希望它适合你

Answer 4

官方解决方案是Muhammad Talha Akba：

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

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

4 个答案: