javascript - HTML 复选框的状态无法在浏览器中呈现

Question

这是我的js代码:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            if($("#a").attr("checked")){
                $("#a").attr("checked",false);
            }else{
                $("#a").attr("checked",true);
            }
        })
    })
</script>

这是我的 html 代码:

<input type="checkbox"  id="a">
<button>123</button>

我点击浏览器上的按钮，复选框只能在第一次和第二次切换状态。

但是我不认为attr()的问题，我之前有一些代码可以正确运行。

  $("#delete").click(function(){
        if($("input[name='del_id[]']").attr("checked")){
            $("input[name='del_id[]']").attr("checked",false);
        }else{
            $("input[name='del_id[]']").attr("checked",true);
        }
    });

有人可以帮助我吗？

Answer 1

使用prop()而不是attr()就像，

$("button").click(function () {
   $("#a").prop("checked", !$('#a').prop('checked'));
});

Demo