1. 程式人生 > >js—通過attr新增input checked屬性失效的原因

js—通過attr新增input checked屬性失效的原因

jQuery 1.6之前,attr()承擔了attribute的設定和獲取工作+property的設定和獲取工作;

jQuery 1.6新增,prop()函式,並用來承擔property的設定或獲取工作之後,attr()才只用來負責attribute的設定和獲取工作

因此,1.6版本以後通過attr()設定checked的屬性:

如果當前input中初始化未定義checked屬性,則不管當前是否選中$('input[type="radio"]').attr("checked")都會返回undefined

如果當前input中初始化已定義checked屬性,則不管是否選中,$('input[type="radio"]').attr("checked")都會返回checked. 

解決:通過prop方法獲取checked屬性,獲取的checked返回值為boolean,選中為true,否則為flase 

$("input[type='radio']").prop("checked",true);

因此,在1.6之前,你只能使用attr()函式;1.6及以後版本,你可以根據實際需要選擇對應的函式。

在jQuery 1.6及以後版本中,具有 true 和 false 兩個屬性的屬性,如 checked, selected 或者 disabled 使用prop();對於其它能夠用prop()實現的操作,也儘量使用prop()函式。

延伸:attr與prop

♨ attr()

1.attr()是通過使用的 DOM 的 API setAttribute() 和 getAttribute() 方法操作的屬性元素節點

2.(一般)設定或獲取自定義的DOM屬性

3.用attr來設定屬性名,html結構是會發生變化

4.設定的屬性值只能是字串型別(如果不是字串型別,也會呼叫其toString()方法,將其轉為字串型別)5.

♨ prop()

1. prop()通過document.getElementById(el)[name] = value來設定的,是轉化為js物件element 的一個屬性

2.(一般)設定或獲取元素本身就帶有的固有屬性(比如<a>元素的DOM屬性有“href、target和class")

3.用prop來設定屬性名,html結構是不會發生變

4.設定的屬性值可以為包括陣列和物件在內的任意型別