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

演示

Answer 2

如果您使用 jQuery 版本 1.8.3，您的代码是正确的

$(document).ready(function(){

        $("button").click(function(){
            if($("#a").attr("checked")){
                $("#a").attr("checked",false);
            }else{
                $("#a").attr("checked",true);
            }
        })
    })

小提琴

http://jsfiddle.net/YXkgm/1/

如果你使用 1.8 以上使用 prop

$(document).ready(function(){

        $("button").click(function(){
            if($("#a").prop("checked")){
                $("#a").prop("checked",false);
            }else{
                $("#a").prop("checked",true);
            }
        })
    })

小提琴

http://jsfiddle.net/YXkgm/