checkbox 全選、取消全選、反選

在寫一個全選、取消全選、反選的功能時。

未來元素[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。