今天寫代碼遇到一個小小的問題，情況是這樣的：我的頁面中有兩個復選框，我想實現選中一個復選框的同時另一個復選框也被選中，取消選中時亦然。一開始我用的是attr()和removeAttr()的方法，代碼如下：
<input type="checkbox" id="checkbox1" />
<input type="checkbox" id="checkbox2" />
<script>
$("#checkbox1").click(function(){
var bol = $('#checkbox1').is(':checked');
if(bol){
$('#checkbox2').attr("checked",'check');
}else{
$('#checkbox2').removeAttr("checked");
}
})
$("#checkbox2").click(function(){
var bol = $('#checkbox2').is(':checked');
if(bol){
$('#checkbox1').attr("checked",'check');
}else{
$('#checkbox1').removeAttr("checked");
}
})
</script>
后來發現這個方法不行，會有Bug：第一次我選中復選框A，復選框B可以同時自動被選中，取消選中復選框A復選框B也同時取消，好，到這里是沒問題的；但如果我這樣選擇：選中復選框A，復選框B同時自動選中，再點擊復選框B來取消選中兩個復選框，就沒有用了，以后再怎么選中A或選中B，另一個都不為所動。
然后我試著換了個方法，使用prop()來替代attr()，代碼如下：
<input type="checkbox" id="checkbox1" />
<input type="checkbox" id="checkbox2" />
<script>
$("#checkbox1").click(function(){
var bol = $('#checkbox1').is(':checked');
if(bol){
$('#checkbox2').prop("checked",true);
}else{
$('#checkbox2').prop("checked",false);
}
})
$("#checkbox2").click(function(){
var bol = $('#checkbox2').is(':checked');
if(bol){
$('#checkbox1').prop("checked",true);
}else{
$('#checkbox1').prop("checked",false);
}
})
</script>
完全沒問題，無論什么時候A與B的選中狀態都是同步的：
這是什么原因呢？到網上查了一下，原理是這樣的：
"attr"是"attribute"的縮寫，表示HTML文檔節點的屬性，例如：
<input type="checkbox" id="checkbox1" class="mycheckbox" checked="checked" />
這里面id、class、checked都是input（HTML文檔節點）的屬性；"prop"是"property"的縮寫，表示JS對象的屬性，例如：
var student = {name:"張三",age:"18",id:"001"}
這里面name、age、id都是student（JS對象）的屬性。
在jQuery 1.6之前，只有attr()方法沒有prop()方法，1.6及之后的版本增加了prop()方法，所以使用1.6及之后版本的jQuery，操作文檔節點的屬性和JS對象的屬性需要分別使用其對應的方法。
jQuery認為：attribute的checked、selected、disabled表示的是標簽初始狀態的值，所以我在使用attr("checked",'check')方法時，僅僅是為input增加了一個checked的屬性，即只設定了該復選框的初始狀態為選中狀態，而沒有改變該復選框的實時選中狀態，所以會出現上述Bug。只有property的值才能表示該對象的實時屬性，故在我這種情況下使用prop("checked",true)才是正確的。
最后記錄幾個使用attr()和prop()時的細節問題：
- 對于表單元素的checked、selected、disabled等屬性，在jQuery 1.6之前，attr()獲取這些屬性的返回值為Boolean類型，如果被選中(或禁用)就返回true，否則返回false。但是從1.6開始，使用attr()獲取這些屬性的返回值為String類型，如果被選中(或禁用)就返回"checked"、"selected"或"disabled"，如果不需要這個屬性了，應使用removeAttr()將其移除。
- 1.6及之后請使用prop()來設定表單的實時狀態（如：checked、selected、disabled），值為true或false。
- 1.6及之后attr()設置的值只能是String型的，而prop()設置的值可以是任意數據類型。
