1. 程式人生 > >jquery,attr,prop,checkbox標簽已有checked=checked但是不顯示勾選

jquery,attr,prop,checkbox標簽已有checked=checked但是不顯示勾選

checked 問題: true pan 註意 什麽 復選框 code 所在

最近在做項目的過程中碰到了這樣的一個問題:在使用bootstrap模態框的過程中,在模態框中有一個checkbox標簽,一開始是為選中的,當點擊觸發模態框按鈕,選中chcekbox時,會顯示勾選,這個時候將選中的狀態緩存起來,然後點擊模態框中的關閉按鈕,再次點擊觸發模態框按鈕彈出模態框,這個時候問題出現了:
checkbox標簽已有checked=checked但是不顯示勾選,網上也查過有解決方案,就是將 $("...").attr("checked", true)改為$("...").prop("checked", true),問題解決,但是,問題是解決了,那麽原因是出現在哪裏呢?

首先來了解下 jquey中的 attr()函數和prop()函數,attr()是處理 attribute的值的,而prop()是處理 property 的值的 ,jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值時,會返回 property 的值,這就導致了結果的不一致。從 jQuery 1.6 開始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值,那麽歸根結底,就是在處理 attribute 和 property。
很多attribute節點有一個相應的property屬性,因而attribute和property很容易被混淆在一起,如某個div元素中的id和class既是attribute也有property,不管哪種方式都可以訪問和修改,但是對於自定義的attribute節點,或者自定義property,兩者就沒有關系了(但是在IE6-7中,兩者還是一樣的,好奇葩的,但願我們都能早日拋棄IE8以下的),需要註意的是,對於checked特性(attribute)不是對應它checked屬性(property),attribute實際對應的是defaultChecked屬性,而且僅用於設置復選框最初的值,checked的attribute不會因為復選框的狀態而改變,而checked的property會因為復選框的狀態而改變,所以在.attr()函數中,就算設置成了.attr("checked", true),也只是用來存儲默認或者選中屬性的默認值,卻並不改變該復選框被選中和選中,這就是為什麽 checkbox標簽已有checked=checked但是不顯示勾選 的原因所在

選擇:

$("#isremind").prop("checked",true);

取消選擇:

$("#isremind").removeAttr("checked");

jquery,attr,prop,checkbox標簽已有checked=checked但是不顯示勾選