7

谁能解释为什么按切换 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 上测试过，两者都有同样的问题。

我在这里想念什么？

4

4 回答 4

7

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

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

编辑：看到：!$("#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

（以前在更改之前工作，感觉像一个错误）

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
于 2013-02-10T18:48:26.803 回答
3 
if($("#chk").is(":checked"))  
    $("#chk").prop("checked", false);  
else
    $("#chk").prop("checked", true);

您应该使用.prop()并且检查也可以使用 BOOLEAN 指定。

于 2013-02-10T18:30:57.573 回答
0 
$(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());
  });
});

希望它对你有用

于 2013-02-10T18:38:00.523 回答
0

官方解决方案是 Muhammad Talha Akba 之一：

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

于 2013-10-24T10:38:37.263 回答