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

$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
如果（$（“#chk”）是（“：选中”））
$（“#chk”）。移除（“选中”）；
其他的
$（“#chk”）.attr（“已检查”、“已检查”）；
$（“#lbldebug”）.text（$（“#chk”）.clone（）.wrap（“”）.parent（）.html（））；
});
});

看

我在Opera和Chrome上都进行了测试，两者都有相同的问题

我错过了什么

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

您应该使用

.prop（）

，也可以使用布尔值指定复选框。

$（文档）.ready（函数（））{
$(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());
  });
});

$（“#btn”）。单击（函数（）{
if（$（“#chk”）.attr（'checked'）=='checked'）
$（“#chk”）。移除（“选中”）；
其他的
$（“#chk”）.attr（“已检查”、“已检查”）；
$（“#lbldebug”）.text（$（“#chk”）.clone（）.wrap（“”）.parent（）.html（））；
});
});

---

希望它能为您工作

对于jQuery 1.9+，属性属性属性属性无法工作，您可以简化复选框的切换，如：

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

（习惯于在变更前工作，感觉像个bug）

编辑2：错误：表格不正确

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

---

官方解决方案是穆罕默德·塔尔哈·阿克巴方案：

---

Ugh，突然升级到1.9.1似乎不值得。@Langdon是的，您需要为1.9.1使用

.prop（'checked'）

-而不是

attr（）

正如我在回答中指出的那样，这并不坏，因为在这之前有时会出现问题，并且这以一致的方式正确地支持true properties vs attributes。@Langdon注意：“但是jQuery Migrate插件可以提供向后兼容的行为，如果使用此签名，它会发出警告。”从可能是使用1.9.1的一个步骤

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