如何实现全选checkbox效果

效果图：

 

简介：当勾选【全选】checkbox时，其余checkbox都要选中，当取消【全选】checkbox时，其余checkbox都要取消。

这一点很容易实现。

但是，当勾选【全选】checkbox时，其余checkbox都要选中，当取消其余checkbox中的任意一项时，【全选】checkbox需要取消勾选。

这一点会有问题，笔者遇到的就是可以取消【全选】checkbox，但同时其余checkbox也都取消了。这TM就尴尬了。

解决的方法：

在   Ext.getCmp("allSelectCheckbox").setValue(false);  之前加一句   Ext.getCmp("allSelectCheckbox").checked = false; 

就是说，再给勾选【全选】checkbox 执行setValue() 函数之前 先直接赋值，也就是说setValue(false) 之前该checkbox的值已经是false了。

问题来了，也许你觉得那有了.checked = false 那么 setValue(false) 不是多此一举吗？ 其实不然，如果只有前者的话，虽然这个checkbox值为false，但是前台显示的效果还是处于勾选状态，需要通过 setValue() 来刷新一下显示效果。

 

 

具体代码如下：

【全选】checkbox：

 

<span style="font-size:14px;">allSelectCheckbox: {
        width:20,
        margins:"15 0 15 20",
        listeners: {
            check: function () {
                var tmp = Ext.getCmp("allSelectCheckbox");

                if (Ext.getCmp("magazineTableContent")) {
                    var checkGroup = Ext.getCmp("magazineTableContent").items.items;
                    for (var i = 0; i < checkGroup.length; i++) {
                        var tmpCheck = checkGroup[i];
                        tmpCheck.items.items[0].setValue(tmp.getValue());
                    }
                }
            }
        }
   },</span>

 

 

其余【单个】checkbox：

 

<span style="font-size:14px;">magazineTableRow0:{
	width:20,
        margins:"15 0 15 26",
        listeners:{
            check:function(){
                var cmp = this.ownerCt;
        	if (this.checked == true) {
                    cmp.addClass("magazineTableRowSelected");
        	} else {
                    cmp.removeClass("magazineTableRowSelected");
        	    Ext.getCmp("allSelectCheckbox").checked = false;
        	    Ext.getCmp("allSelectCheckbox").setValue(false);
        	}
        }
       }
},</span>