Getting values from checkbox - Logic Issue - extjs4

Question

I have 2 checkboxes, Its called A and B. When i click on the checkbox A, then all the a particular field in the Grid should filter all the values with the value A in it.
If i click B, then the filed in the grid should filter and display all the values that has B in it.
If i click both, then both A and B should be displayed.
if (chkbxVal== 'A') {
console.log('Only A');
return rec.get('gridField') == 'A';
} else if (chkbxVal == 'B'){
console.log('Only B');
return rec.get('gridField') == 'B';
} else {
console.log('both A and B');
return rec;
}
The above, works if i have 2 checkboxes. But what if i have 3 checkboxes (or more). Should i have 9 if-else conditions for it to work ? Look at the following prototype, it is only for 3 checkboxes, and i have like 6 or 7 then i should have 36 - 49 if-else conditions ? I am having a logic issue can someone help me ?
if (A){
// display A
} else if (B) {
// display B
} else if (C) {
//display C
} else if (A and B) {
//display A and B
} else if (A and C) {
// display A and C
} else if (B and C) {
//display B and C
} else {
// display all
}

Answer 1

No, that would not be a good idea. Here's an example, it only goes up to 'E' but the example scales:
Ext.require('*');
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['name', 'filterField']
})
Ext.onReady(function(){
var active = [];
function onBoxChange() {
active = [];
form.items.each(function(item){
if (item.checked) {
active.push(item.inputValue);
}
});
updateGrid();
}
function updateGrid() {
store.suspendEvents();
store.clearFilter();
store.filterBy(function(rec){
return Ext.Array.indexOf(active, rec.get('filterField')) > -1;
});
store.resumeEvents();
grid.getView().refresh();
}
var items = [];
Ext.Array.forEach(['A', 'B', 'C', 'D', 'E'], function(name){
items.push({
boxLabel: name,
xtype: 'checkbox',
inputValue: name,
checked: true,
listeners: {
change: onBoxChange
}
});
});
var form = new Ext.form.Panel({
flex: 1,
items: items
});
var store = new Ext.data.Store({
model: MyModel,
data: [{
name: 'A1',
filterField: 'A'
}, {
name: 'A2',
filterField: 'A'
}, {
name: 'A3',
filterField: 'A'
}, {
name: 'B1',
filterField: 'B'
}, {
name: 'B2',
filterField: 'B'
}, {
name: 'C1',
filterField: 'C'
}, {
name: 'C2',
filterField: 'C'
}, {
name: 'C3',
filterField: 'C'
}, {
name: 'D1',
filterField: 'D'
}, {
name: 'E1',
filterField: 'E'
}, {
name: 'E2',
filterField: 'E'
}, {
name: 'E3',
filterField: 'E'
}, {
name: 'E4',
filterField: 'E'
}]
});
var grid = new Ext.grid.Panel({
flex: 1,
store: store,
columns: [{
dataIndex: 'name',
text: 'Name'
}]
});
new Ext.container.Viewport({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [form, grid]
});
});