jquery checkbox選中狀態以及實現全選反選

jquery1.6以下版本獲取checkbox的選中狀態：

 $('.ck').attr('checked');

 $('.ck').attr('checked',true);//全選

 $('.ck').removeAttr('checked');//全不選

 

 發現，以上代碼，無論input checkbox是選中還是未選中狀態，無論IE還是Chrome，返回結果都是undefinded；

 查閱發現：jquery1.6版本對此作了修改，checked屬性在頁面初始化的時候就已經初始化好了，不會隨着狀態改變而變。也就是說checkbox在頁面加載完畢是選中狀態，則永遠返回checked，如果一開始沒被選中，則永遠返回undefinded。

jquery1.6及以上版本獲取checkbox的選中狀態：

 $('.ck').prop('checked');

 $('.ck').prop('checked',true);//選中
 
 $('.ck').prop('checked', function(i, attr){return !attr;});//反選

突然想到，可以通過反選實現c/s系統中的RadioBox的單選框功能,如下：

<div>
    <li style="margin: 5px; float: left; min-width:200px;min-height:24px;">
        <input class="ckbox" id="ck_0" type="checkbox" checked /><label for="ck_0">是</label><!--默認選中css樣式參考http://www.csscheckbox.com/checkboxes/1/-->
    </li>
    <li style="margin: 5px; float: left; min-width:200px;min-height:24px;">
        <input class="ckbox" id="ck_1" type="checkbox" /><label for="ck_1">否</label>
    </li>
</div>

JS實現單選控制如下：

//這兒實現的只針對兩個checkbox的情況，多個checkbox自由發揮唄
$('.ckbox').click(function () {
   $('.ckbox').not($(this)).prop('checked', function (i, attr) { return !attr; });//除自身外反選
});

效果如下圖：

 

在Jquery 1.6及之后，新加了一個方法prop()，通過attr方法去獲得屬性，通過prop方法去獲得特性。在遇到要獲取或設置checked,selected,readonly和disabled等屬性時，用prop方法。

官方解釋prop():獲取在匹配的元素集中的第一個元素的屬性值。

大家都知道有的瀏覽器只要寫disabled，checked就可以了，而有的要寫成disabled = "disabled"，checked="checked"，比如用attr("checked")獲取checkbox的checked屬性時選中的時候可以取到值,值為"checked"但沒選中獲取值就是undefined。

jq提供新的方法“prop”來獲取這些屬性，就是來解決這個問題的，以前我們使用attr獲取checked屬性時返回"checked"和"",現在使用prop方法獲取屬性則統一返回true和false。

那么，什么時候使用attr()，什么時候使用prop()？
1.添加屬性名稱該屬性就會生效應該使用prop();
2.是有true,false兩個屬性使用prop();
3.其他則使用attr();

以下是官方建議attr(),prop()的使用：

Attribute/Property	.attr()	.prop()
accesskey	√
align	√
async	√	√
autofocus	√	√
checked	√	√
class	√
contenteditable	√
draggable	√
href	√
id	√
label	√
location ( i.e. window.location )	√	√
multiple	√	√
readOnly	√	√
rel	√
selected	√	√
src	√
tabindex	√
title	√
type	√
width ( if needed over .width() )	√