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

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 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>