如何实现全选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>






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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值