Ext. Net_CheckboxGroup check, select all, invert, and limit check

This article introduces Ext. Net_CheckboxGroup to check, select, invert, and restrict Code. It is nothing more than an operation on the properties and methods of the control object. It is worth noting that chk. suspendEvents () and chk. resumeEvents () are events for suspending and restoring the checkbox control.

This example shows how to select, invert, and restrict a CheckboxGroup check.

Script

The Code is as follows:

Copy code

<Script type = "text/javascript" defer = "defer"> ConstraintChkedNum = 3; // customize the number of checked items ChkedNum = 0; Var checkWeek = { SelectedAll: function (chkGrp ){ Var idx; Var cbAll = Ext. getCmp (chkGrp. items. items [chkGrp. items. length-2]. id ); For (idx = 0; idx <chkGrp. items. length-1; idx ++ ){ Var cb = Ext. getCmp (chkGrp. items. items [idx]. id ); Cb. setValue (cbAll. checked ); } }, Unselected: function (chkGrp ){ Var idx; For (idx = 0; idx <chkGrp. items. length-2; idx ++ ){ Var cb = Ext. getCmp (chkGrp. items. items [idx]. id ); Cb. setValue (! Cb. checked ); } }, SelectedConstraint: function (chk ){ If (chkedNum> = ConstraintChkedNum ){ Alert ('check at most '+ ConstraintChkedNum +' item .'); Chk. suspendEvents (); Chk. setValue (false ); Chk. resumeEvents (); } Else { If (chk. checked) chkedNum ++; Else chkedNum --; } } } </Script>

HTML document

The Code is as follows:

Copy code

<H1> Select select all <Ext: CheckboxGroup ID = "Weeks" runat = "server" Width = "500" Height = "50"> <Items> <Ext: Checkbox ID = "Checkbox1" runat = "server" Name = "Checkbox1" BoxLabel = "Monday"/> <Ext: Checkbox ID = "Checkbox2" runat = "server" Name = "Checkbox1" BoxLabel = "Tuesday"/> <Ext: Checkbox ID = "Checkbox3" runat = "server" Name = "Checkbox1" BoxLabel = "Wednesday"/> <Ext: Checkbox ID = "Checkbox4" runat = "server" Name = "Checkbox1" BoxLabel = "Thursday"/> <Ext: Checkbox ID = "Checkbox5" runat = "server" Name = "Checkbox1" BoxLabel = "Friday"/> <Ext: Checkbox ID = "Checkbox6" runat = "server" Name = "Checkbox1" BoxLabel = "Saturday"/> <Ext: Checkbox ID = "Checkbox7" runat = "server" Name = "Checkbox1" BoxLabel = "Sunday"/> <Ext: Checkbox ID = "Checkbox8" runat = "server" Name = "Checkbox1" BoxLabel = "select all"> <Listeners> <Check Handler = "checkWeek. SelectedAll (# {Weeks})"/> </Listeners> </Ext: Checkbox> <Ext: Checkbox ID = "Checkbox9" runat = "server" Name = "Checkbox1" BoxLabel = "invert"> <Listeners> <Check Handler = "checkWeek. Unselected (# {Weeks})"/> </Listeners> </Ext: Checkbox> </Items> </Ext: CheckboxGroup> <H1> Restrict and select <Ext: CheckboxGroup ID = "WeeksConstr" runat = "server" Width = "500" Height = "200"> <Items> <Ext: Checkbox ID = "Checkbox10" runat = "server" Name = "Checkbox1" BoxLabel = "Monday"> <Listeners> <Check Fn = "checkWeek. SelectedConstraint"/> </Listeners> </Ext: Checkbox> <Ext: Checkbox ID = "Checkbox11" runat = "server" Name = "Checkbox1" BoxLabel = "Tuesday"> <Listeners> <Check Fn = "checkWeek. SelectedConstraint"/> </Listeners> </Ext: Checkbox> <Ext: Checkbox ID = "Checkbox12" runat = "server" Name = "Checkbox1" BoxLabel = "Wednesday"> <Listeners> <Check Fn = "checkWeek. SelectedConstraint"/> </Listeners> </Ext: Checkbox> <Ext: Checkbox ID = "Checkbox13" runat = "server" Name = "Checkbox1" BoxLabel = "Thursday"> <Listeners> <Check Fn = "checkWeek. SelectedConstraint"/> </Listeners> </Ext: Checkbox> <Ext: Checkbox ID = "Checkbox14" runat = "server" Name = "Checkbox1" BoxLabel = "Friday"> <Listeners> <Check Fn = "checkWeek. SelectedConstraint"/> </Listeners> </Ext: Checkbox> <Ext: Checkbox ID = "Checkbox15" runat = "server" Name = "Checkbox1" BoxLabel = "Saturday"> <Listeners> <Check Fn = "checkWeek. SelectedConstraint"/> </Listeners> </Ext: Checkbox> <Ext: Checkbox ID = "Checkbox16" runat = "server" Name = "Checkbox1" BoxLabel = "Sunday"> <Listeners> <Check Fn = "checkWeek. SelectedConstraint"/> </Listeners> </Ext: Checkbox> </Items> </Ext: CheckboxGroup>