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

不足之處歡迎你們補充指正。

參考：
http://blog.csdn.net/hjb27224...
http://www.jb51.net/article/5...