jQuery获取和设置checkbox的checked属性小结

最近在项目中使用到jQuery设置checkbox，使用场景是页面上有三类单选框，一个是全选所有页数据(id=cb1),一个是选择当前页(id=cb2)，一个是选择一条(name=cb3)，也算常用的场景。

一开始全选框的点击事件这样写：

$("#cb1",this).click(function(){
    var allChecked = this.checked;
    $("#cb2").attr("checked",allChecked);    //当前页
    $("input[name=cb3]").each(    
    function(){
        this.checked = allChecked;
    })
});

结果是点击cb1以后,cb3的每条和cb2都能选中，cb1取消后其他也都能取消，但经过上面一个回合以后，cb3正常，cb2却再也选不中，没有反应，当时为此抓狂了很久。一开始以为是jQuery的版本问题，所以查看了引入的版本，发现并不是原因。

原来在jquery里，有两种操作元素属性的方法，一种是attr()，另一种是prop()。

attr()的属性在页面首次加载时就确定。当页面初始状态checkbox没有选中，$("#cb1").attr("checked")为undefined，点击选中后，还是undefined，不管选中与否$("#cb1").attr("checked")始终都是undefined；当页面初试状态checkbox选中，$("#cb1").attr("checked")为checked，之后取消选中还是checked。

prop()方法随checked属性改变而改变，选中时为true，为选中时为false。

最后，总结下获取和设置checked属性的方法。

得到选中属性

1. $("#id").prop("checked")
2. $("#id").get(0).checked)
3. document.getElementById("#id").checked
4. $("#id").is(":checked")

设置选中

1. $("#id").prop("checked",true)
2. $("#id").get(0).checked = true
3. document.getElementById("#id").checked = true

参考：

最近在项目中使用到jQuery设置checkbox，使用场景是页面上有三类单选框，一个是全选所有页数据(id=cb1),一个是选择当前页(id=cb2)，一个是选择一条(name=cb3)，也算常用的场景。 一开始全选框的点击事件这样写： $("#cb1",this).click(function(){ var allChecked = this.checked; $("#cb2").attr("checked",allChecked); //当前页 $("input[name=cb3]").each( function(){ this.checked = allChecked; }) }); 结果是点击cb1以后,cb3的每条和cb2都能选中，cb1取消后其他也都能取消，但经过上面一个回合以后，cb3正常，cb2却再也选不中，没有反应，当时为此抓狂了很久。一开始以为是jQuery的版本问题，所以查看了引入的版本，发现并不是原因。 原来在jquery里，有两种操作元素属性的方法，一种是attr()，另一种是prop()。 attr()的属性在页面首次加载时就确定。当页面初始状态checkbox没有选中，$("#cb1").attr("checked")为undefined，点击选中后，还是undefined，不管选中与否$("#cb1").attr("checked")始终都是undefined；当页面初试状态checkbox选中，$("#cb1").attr("checked")为checked，之后取消选中还是checked。 prop()方法随checked属性改变而改变，选中时为true，为选中时为false。 最后，总结下获取和设置checked属性的方法。 得到选中属性 $("#id").prop("checked") $("#id").get(0).checked) document.getElementById("#id").checked $("#id").is(":checked") 设置选中 $("#id").prop("checked",true) $("#id").get(0).checked = true document.getElementById("#id").checked = true 参考：