如何实现全选checkbox效果

最新推荐文章于 2022-01-21 11:20:47 发布

weixin_30865427

最新推荐文章于 2022-01-21 11:20:47 发布

阅读量468

点赞数

原文链接：http://www.cnblogs.com/fifteen718/p/9533941.html

版权

效果图：

简介：当勾选【全选】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>

转载于:https://www.cnblogs.com/fifteen718/p/9533941.html