Question

我试图动态更改checked值。但视觉复选框不断取消选中。虽然checked="checked"存在。

HTML：

<input type="checkbox" id="chk" /><br>
<button id="btn">Click me</button>

JS：

$("#btn").click(function(){
  var chk = $("#chk").attr("checked");
  $("#chk").attr("checked", !chk);
});

JSFiddle上的链接：http://jsfiddle.net/USHRw/4/ - 尝试多次点击该按钮。

如何解决这个问题。谢谢！

Answer 1

使用.prop()而非.attr()。

$("#btn").click(function () {
    var chk = $("#chk").prop("checked");
    $("#chk").prop("checked", !chk);
    if (!chk === true) {
        $("#lbl").text("Checked");
    } else {
        $("#lbl").text("Unchecked");
    }
});

<强> jsFiddle example

正如.attr()的文档所说：

要检索和更改DOM属性，例如已选中，已选中，或禁用表单元素的状态，使用.prop（）方法。

Answer 2

对jQuery 1.9及更高版本使用prop()而不是attr()，您的代码适用于jQuery 1.8 .3检查here

Live demo 使用prop()进行jQuery 1.9.1

$("#btn").click(function(){
    var chk = $("#chk").attr("checked");
    $("#chk").prop("checked", !chk);
});

Answer 3

我认为这可以解决您的问题：

$("#button").click(function(){
  var checked = $("#chk").prop("checked");
  $("#chk").prop("checked", !checked);
    if (!checked === true) {
        //Checked Event Code
    } else {
        //Unchecked Event Code
    }
});

JQuery - Checkbox不检查（直观地）

3 个答案: