jQuery操作復選框選中狀態,prop()和attr()的區別和使用方法

今天寫代碼遇到一個小小的問題,情況是這樣的:我的頁面中有兩個復選框,我想實現選中一個復選框的同時另一個復選框也被選中,取消選中時亦然。一開始我用的是attr()和removeAttr()的方法,代碼如下:

<input type="checkbox" id="checkbox1" />
<input type="checkbox" id="checkbox2" />
<script>
    $("#checkbox1").click(function(){
        var bol = $('#checkbox1').is(':checked');
        if(bol){
            $('#checkbox2').attr("checked",'check');
        }else{
            $('#checkbox2').removeAttr("checked");
        }
    })
    $("#checkbox2").click(function(){
        var bol = $('#checkbox2').is(':checked');
        if(bol){
            $('#checkbox1').attr("checked",'check');
        }else{
            $('#checkbox1').removeAttr("checked");
        }
    })
</script>

后來發現這個方法不行,會有Bug:第一次我選中復選框A,復選框B可以同時自動被選中,取消選中復選框A復選框B也同時取消,好,到這里是沒問題的;但如果我這樣選擇:選中復選框A,復選框B同時自動選中,再點擊復選框B來取消選中兩個復選框,就沒有用了,以后再怎么選中A或選中B,另一個都不為所動。
然后我試著換了個方法,使用prop()來替代attr(),代碼如下:

<input type="checkbox" id="checkbox1" />
<input type="checkbox" id="checkbox2" />
<script>
    $("#checkbox1").click(function(){
        var bol = $('#checkbox1').is(':checked');
        if(bol){
            $('#checkbox2').prop("checked",true);
        }else{
            $('#checkbox2').prop("checked",false);
        }
    })
    $("#checkbox2").click(function(){
        var bol = $('#checkbox2').is(':checked');
        if(bol){
            $('#checkbox1').prop("checked",true);
        }else{
            $('#checkbox1').prop("checked",false);
        }
    })
</script>

完全沒問題,無論什么時候A與B的選中狀態都是同步的:

image.png
image.png

這是什么原因呢?到網上查了一下,原理是這樣的:
"attr"是"attribute"的縮寫,表示HTML文檔節點的屬性,例如:

<input type="checkbox" id="checkbox1" class="mycheckbox"  checked="checked" />

這里面id、class、checked都是input(HTML文檔節點)的屬性;"prop"是"property"的縮寫,表示JS對象的屬性,例如:

var student = {name:"張三",age:"18",id:"001"}

這里面name、age、id都是student(JS對象)的屬性。
在jQuery 1.6之前,只有attr()方法沒有prop()方法,1.6及之后的版本增加了prop()方法,所以使用1.6及之后版本的jQuery,操作文檔節點的屬性和JS對象的屬性需要分別使用其對應的方法。
jQuery認為:attribute的checked、selected、disabled表示的是標簽初始狀態的值,所以我在使用attr("checked",'check')方法時,僅僅是為input增加了一個checked的屬性,即只設定了該復選框的初始狀態為選中狀態,而沒有改變該復選框的實時選中狀態,所以會出現上述Bug。只有property的值才能表示該對象的實時屬性,故在我這種情況下使用prop("checked",true)才是正確的。
最后記錄幾個使用attr()和prop()時的細節問題:

  • 對于表單元素的checked、selected、disabled等屬性,在jQuery 1.6之前,attr()獲取這些屬性的返回值為Boolean類型,如果被選中(或禁用)就返回true,否則返回false。但是從1.6開始,使用attr()獲取這些屬性的返回值為String類型,如果被選中(或禁用)就返回"checked"、"selected"或"disabled",如果不需要這個屬性了,應使用removeAttr()將其移除。
  • 1.6及之后請使用prop()來設定表單的實時狀態(如:checked、selected、disabled),值為true或false。
  • 1.6及之后attr()設置的值只能是String型的,而prop()設置的值可以是任意數據類型。

參考文章:http://www.365mini.com/page/jquery-attr-vs-prop.htm

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容