先上程式碼：

// 全選
    function CheckAll() {
        if ($("#th_checkbox").prop('checked'))
            $('input[name="subCheckBox"]').each(function () {
                $(this).prop('checked', true);
            });
        else
            $('input[name="subCheckBox"]').each(function () {
                $(this).prop('checked', false);
            });
    }

之前在做病理接收的頁面的時候，需要做一個全選與反選的控制元件。在做控制元件的過程中，遇到一個問題，就是將程式碼中的prop方法換成attr方法，這個控制元件就失效了，改成prop方法就又可以了。以前也遇到過這個問題，當時並沒有深究，這次就好好查了下資料，結合網上的例子，明確了二者之間的區別。

1.prop()

(1)對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。

如果把DOM元素看成是一個普通的Object物件，這個物件在其定義時就具有一些屬性（property),比如：

var option = 
{
    selected:false，
     disabled:false，
     attributes:[],
     ...
 }
 

這個時候就使用prop()方法。

再舉個例子：

<a href="#" id="link1" action="delete">刪除</a>

當需要對a標籤中的href進行操作時就要用prop()方法，因為href和id是a標籤的固有屬性。如圖：

（2）jq 1.6的官方文件建議，對值為true和false的屬性使用prop()

<input type="checkbox"  id="check1"/>記住密碼
<input type="checkbox"  id="check1" checked="checked"/>記住密碼

$("#chke1").prop("checked");// false
$("#chke2").prop("checked");// true

$("#chke1").attr("checked"); //undefined
$("#chke2").attr("checked");//"checked"
 

$('').prop()返回的是DOM物件

2.attr()

(1)attr是從頁面搜尋獲得元素值，所以頁面必須明確定義元素才能獲取值

（2）$('').attr()返回的是html物件

（3） 標籤中我們自定義的屬性用attr()

如：

<a href="#" id="link1" action="delete">刪除</a>

其中action是我們自定義的屬性，這時候我們要用attr()

根據（1）,再舉個例子：

<img src="https://www.runoob.com/images/pulpit.jpg" />

此時用$("img").attr("width")是獲取不到值的，因為頁面原始碼中沒有定義width屬性，因為attr（）掃描了頁面原始碼。而用$("img").prop("width") 可返回 284。

綜上所述：

1、當需要對頁面標籤自帶的屬性進行操作時，用prop(),其他屬性用attr()

2、當屬性值只有true和false的值時，用prop()

3、操作checkbox、radio時用prop()

4、官方建議，如圖：

補充一點說明，雖然官方建議圖中關於checked屬性attr和prop都可以，但開發中還是用prop，因為checked對於attr可以選中但是不能取消，選中時值是不會變的，而用prop選中時值是會變的，可以選中也可以取消。