jQuery .attr() vs .prop()

參考自：https://cythilya.github.io/2017/09/10/jquery-attr-vs-prop/

 

<input type="checkbox" class="checkbox-1" checked="true" />
<input type="checkbox" class="checkbox-2" />
<input type="checkbox" class="checkbox-3" checked="false" />

$('.checkbox-1').prop('checked'); //true
$('.checkbox-1').attr('checked'); //checked
$('.checkbox-2').prop('checked'); //false
$('.checkbox-2').attr('checked'); //undefined
$('.checkbox-3').prop('checked'); //true
$('.checkbox-3').attr('checked'); //checked

<input type="checkbox" class="checkbox-3" />

$('.checkbox-3').attr('checked', 'checked');
$('.checkbox-1').prop('checked', true)

** 由於 attribute 只要有設定 HTML 特性 checked，不論等號後面的值是什麼，甚至不帶值，皆會得到 checked，意即只要設定特性名稱即可。若要取消勾選則要使用 .removeAttr() 移除該特性。.prop() 仍是使用布林值設定勾選與否。

<input type="checkbox" class="checkbox-1" checked="false" />
<!-- 雖然設定checked為false, 仍然會check-->