PDA

View Full Version : Counting Checkboxes in Checkbox Group



Sno
27 May 2010, 10:01 AM
Is there any way of counting the number of checkboxes in a checkbox group?

I am writing a validation function to check if the checkboxes are blank or filled.
Ideally there are two radio buttons, Issue and No Issue, If Issue is checked, there must be at least one checkbox set to true. There are 11 checkbox groups which have checkboxes that range from 2 checkboxes to 5 checkboxes.

The current problem is this
for(var e = 1; e <= 5; e++){ I need 5 to be the count of checkboxes in a group. Therefore the function won't randomly end when it sees 2 checkboxes and goes for the third which doesn't exist.


{text: 'Save Survey', width: 110, id: 'SaveSurv', name: 'SaveSurv', handler: function() {
var i = 0;
var Check;
var RadName;
var CBName;
for(var c = 1; c <=11; c++){

RadName = c+'Issue';
CBName = c+"CBG";

alert(Ext.getCmp(RadName).getValue());

if (Ext.getCmp(RadName).getValue() == true){

for(var e = 1; e <= 5; e++){
Check = c+'CB'+e;

alert(Ext.getCmp(Check).getValue());

if(Ext.getCmp(Check).getValue() == true){
i += 1;

}
}
}}

if(i == 0){
alert('Error: You must fill in atleast one checkbox if there is an issue.');
}

CrazyEnigma
27 May 2010, 7:48 PM
Given that checkboxgroup is a group of checkboxes, where you do specify the checkboxes? If items is a MixedCollection, I think you can obtain it through the getCount() method.

Sno
28 May 2010, 5:04 AM
I've currently jumped to another page in my program that I am working on, I'll be coming back to this a little after lunch.

Sno
28 May 2010, 9:40 AM
So to answer your question, I have 1 parent panel, filled with about 4 child panels which hold multiple child-child panels, so 15 children to 1 parent. In 11 of the children, have checkbox groups.

I have hardcoded the values


var CBGAmount1 = 4;
var CBGAmount2 = 5;
var CBGAmount3 = 5;
var CBGAmount4 = 2;
var CBGAmount5 = 2;
var CBGAmount6 = 3;
var CBGAmount7 = 4;
var CBGAmount8 = 2;
var CBGAmount9 = 3;
var CBGAmount10 = 3;
var CBGAmount11 = 4;Now I can count what how many times the for loop will go for in this statement


for(var e = 1; e <= Limit; e++)now it works, well kinda, now the new Issue: is it will stop right when it finds the first check box that is true, and it will not search through the other groups at all.

I've tried to reset i = 0 in several places, but nothing has worked as of yet. Any suggestions to make this function continue until it loops to the end?

Should I try to start with a while loop
while(c != 11) and than increment c at the bottom?


buttons: [{text: 'Save Survey', width: 110, id: 'SaveSurv', name: 'SaveSurv', handler: function() {
var Check;
var RadName;
var CBName;
var Limit;
var i = 0;
var a = 0;
// For 11 Panels and 11 checkboxes
for(var c = 1; c <=11; c++){

RadName = c+'Issue'; // Radio Button Identifier
CBName = c+"CBG"; // Checkbox Group Identifier
switch(c){ // To select which Checkbox group and its value of checkboxes
case 1: Limit = CBGAmount1; break;
case 2: Limit = CBGAmount2; break;
case 3: Limit = CBGAmount3; break;
case 4: Limit = CBGAmount4; break;
case 5: Limit = CBGAmount5; break;
case 6: Limit = CBGAmount6; break;
case 7: Limit = CBGAmount7; break;
case 8: Limit = CBGAmount8; break;
case 9: Limit = CBGAmount9; break;
case 10: Limit = CBGAmount10; break;
case 11: Limit = CBGAmount11; break;
}
// if Radio Button Issue is Selected .. continue
if (Ext.getCmp(RadName).getValue() == true){


// Cycle through individual check boxes in that panel
for(var e = 1; e <= Limit; e++){
Check = c+'CB'+e; // checkbox identifier


// If Check box is checked off
if(Ext.getCmp(Check).getValue() == true){

i = + 1;

} // out checkbox check

}// out group
} // panel

}// out for
if(i == 0){
alert('Error: You must fill in atleast one check box if there is an issue. ');
}
}}20696

CrazyEnigma
31 May 2010, 11:25 AM
It is much simpler that you are making it out to be.

Using a 0-based count is easier than a 1-based. Saves having to write <= than <.

This is what I think you are trying to accomplish:
Pseudocode:


for every issue tracker category
if issue radio = yes then
check to see if any checkboxes have been checked
if not, output an error
end if
end for


I would suggest making a component for the issue category that is configurable, and creating a function that does this individually inside the component.



buttons: [{text: 'Save Survey', width: 110, id: 'SaveSurv', name: 'SaveSurv', handler: function() {
var noOfPanels = 11; // Will have to change if the number of panels change.
for (var c = 0; c < noOfPanels; c++) {
var checkboxgroup = Ext.getCmp(i+"CBG");
var radio = Ext.getCmp(i+"CBG");
if (radio.getValue() == true) {
if (checkboxgroup.getValue().length <= 0) { // getValue returns an array of checkboxes that are checked.
alert('Error: You must fill in atleast one check box if there is an issue.');
}
}
}


of you can access the items in the array as:



var checkboxgroup = Ext.getCmp(i+"CBG");
var checkCount;
for (var c = 0; c < noOfPanels; c++) {
checkCount = 0;
for (var idx = 0; idx < checkboxgroup.items.length; idx++)
{
var checkbox = checkboxgroup.items.itemAt(idx);
if (checkbox.getValue() == true) {
checkCount++;
}
}
if (checkCount != 0) {
alert('Error: You must fill in at least one check box if there is an issue.');
}
}


Ultimately, you don't need a radio at all, because if the user selects a checkbox, wouldn't that be an issue already.

Sno
1 Jun 2010, 4:18 AM
My final working function


{text: 'Save Survey', width: 110, id: 'SaveSurv', name: 'SaveSurv', handler: function() {
var Check;
var RadName;
var CBName;
var Limit;
var i = 0;
var j = 0;
// For 11 Panels and 11 checkboxes
for(var c = 1; c <=11; c++){
i=0;
RadName = c+'Issue'; // Radio Button Identifier
CBName = c+"CBG"; // Checkbox Group Identifier
alert(CBName +" i="+ i +" j="+ j);

switch(c){ // To select which Checkbox group and its value of checkboxes
case 1: Limit = CBGAmount1; break;
case 2: Limit = CBGAmount2; break;
case 3: Limit = CBGAmount3; break;
case 4: Limit = CBGAmount4; break;
case 5: Limit = CBGAmount5; break;
case 6: Limit = CBGAmount6; break;
case 7: Limit = CBGAmount7; break;
case 8: Limit = CBGAmount8; break;
case 9: Limit = CBGAmount9; break;
case 10: Limit = CBGAmount10; break;
case 11: Limit = CBGAmount11; break;
}
// if Radio Button Issue is Selected .. continue
if (Ext.getCmp(RadName).getValue() == true){


// Cycle through individual check boxes in that panel
for(var e = 1; e <= Limit; e++){
Check = c+'CB'+e; // checkbox identifier

// If Check box is checked off
if(Ext.getCmp(Check).getValue() == true){

i++;

} // out checkbox check

}if(i == 0){
j++;
}}}// out for
if(j != 0){
alert('Error: You must fill in atleast one check box if there is an issue. ');
}

}}