jquery,attr,prop,checkbox標簽已有checked=checked但是不顯示勾選
阿新 • • 發佈:2017-05-31
checked 問題: true pan 註意 什麽 復選框 code 所在
首先來了解下 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但是不顯示勾選 的原因所在
最近在做項目的過程中碰到了這樣的一個問題:在使用bootstrap模態框的過程中,在模態框中有一個checkbox標簽,一開始是為選中的,當點擊觸發模態框按鈕,選中chcekbox時,會顯示勾選,這個時候將選中的狀態緩存起來,然後點擊模態框中的關閉按鈕,再次點擊觸發模態框按鈕彈出模態框,這個時候問題出現了:
checkbox標簽已有checked=checked但是不顯示勾選,網上也查過有解決方案,就是將
$("...").attr("checked", true)改為$("...").prop("checked",
true),問題解決,但是,問題是解決了,那麽原因是出現在哪裏呢?
很多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但是不顯示勾選