在寫一個全選、取消全選、反選的功能時。
未來元素[type='checkbox']，在使用了jquery-1.11.1.min.js版本的jquery時：
功能版本1：
存在的問題，當使用了attr時，出現，這個操作的未來元素只能點擊第一次有效，即是說，當刷新頁面，我點擊選中，可以選中，點擊取消全校可以取消，點擊反選，可以反選，但是如果再次點擊，那麼該功能消失。so，這個版本X掉。
jQuery.extend({
/*select all type eq 1// select none type eq 2// select reverse type eq 3*/
ZellSelectDescript: function (id,type,obj) {
/*the obj is the elements which use=>type is object*/
var defaults = {
"checkElem":"#layer-table-collect .select-collect-file"
}
,options = $.extend(defaults,obj);
$(document).on("click",id,function () {
var $this = $(this),chk=$(options.checkElem);
if(chk.length>0) {
switch(type) {
case 1:/*all*/
chk.attr("checked","checked");
break;
case 2:/*none*/
chk.removeAttr("checked");
break;
case 3:/*inverse*/
chk.each(function (){
var _s = $(this);
_s.attr("checked",!_s.is(":checked"));
})
break;
default:/*all*/
for(var i=0,len=chk.length;i<len;++i) {
chk[i].checked = true;
}
}
}else{
return false;
}
})
}
})造成上面問題的原因是，我使用的jquery-1.11.1.min.js這個版本，goggle&baidu瞭解，修改checkbox的checked屬性，使用prop,用法和attr同；
so，該功能版本2爲：
jQuery.extend({
/*select all type eq 1// select none type eq 2// select reverse type eq 3*/
ZellSelectDescript: function (id,type,obj) {
/*the obj is the elements which use=>type is object*/
var defaults = {
"checkElem":"#layer-table-collect .select-collect-file"
}
,options = $.extend(defaults,obj);
$(document).on("click",id,function () {
var $this = $(this),chk=$(options.checkElem);
if(chk.length>0) {
switch(type) {
case 1:/*all*/
chk.prop("checked","checked");
break;
case 2:/*none*/
chk.removeProp("checked");
break;
case 3:/*inverse*/
chk.each(function (){
var _s = $(this);
_s.prop("checked",!_s.is(":checked"));
})
break;
default:/*all*/
for(var i=0,len=chk.length;i<len;++i) {
chk[i].checked = true;
}
}
}else{
return false;
}
})
}
})經過測試，代碼可以在IE，火狐下正常使用了，但是尼瑪，谷歌下不能使用。看來出現兼容性問題。
還是用原生js吧，試試...
最終兼容代碼，功能版本3：
jQuery.extend({
/*select all type eq 1// select none type eq 2// select reverse type eq 3*/
ZellSelectDescript: function (id,type,obj) {
/*the obj is the elements which use=>type is object*/
var defaults = {
"checkElem":"#layer-table-collect .select-collect-file"
}
,options = $.extend(defaults,obj);
$(document).on("click",id,function () {
var $this = $(this),chk=$(options.checkElem);
if(chk.length>0) {
switch(type) {
case 1:/*all*/
for(var i=0,len=chk.length;i<len;++i) {
chk[i].checked = true;
}
break;
case 2:/*none*/
for(var i=0,len=chk.length;i<len;++i) {
chk[i].checked = false;
}
break;
case 3:/*inverse*/
for(var i=0,len=chk.length;i<len;++i) {
chk[i].checked = !chk[i].checked;
}
break;
default:/*all*/
for(var i=0,len=chk.length;i<len;++i) {
chk[i].checked = true;
}
}
}else{
return false;
}
})
}
})終於可以使用了，我把這個功能添加到jquery全局函數中。
//調用方法：
$.ZellSelectDescript("#collect-all-btn",1);/*全選*/
$.ZellSelectDescript("#collect-none-btn",2);/*全不選*/
$.ZellSelectDescript("#collect-inverse-btn",3);/*反選*/因爲jQuery的版本並沒有向下兼容，所以我們在使用Jquery的時候，最好翻翻對應的手冊，還有就是多百度，多google。