I. Overview
1.1 Requirement
When using our checkbox widgets, how can we click to check all, so that the following information can be all checked? The effect is as follows:
1.2 Solution
In an initialization event in a checkbox, add widgets to a global array and then iterate over and assign a value to each widget in the array in a check-all checkbox.
II. Sample
2.1 Steps
1) Design the template as follows. The left parent cell of A2 is B2
2) Select A1 (a check-all checkbox) and add a State Change event
Input the JS code:
var flag=this.getValue(); //get the state of the current checkbox, true /false
for(var i=0;i<window.lineboxes.length;i++){
//iterate over each checkbox widget
var cr=FR.cellStr2ColumnRow(window.lineboxes[i].options.location);
//get the row number and column number from the location of each widget
_g().setCellValue(cr.col, cr.row, flag);
//assign a value to the state one by one
}
3) Select A2 (a check-one checkbox) and add an After Initialization event:
Input the JS code:
if (!window.lineboxes) {
window.lineboxes = [];
//add widgets to a global array
}
lineboxes[lineboxes.length] = this;
4) In this way, you can click on the check-all checkbox to check all checkboxes and uncheck the check-all checkbox to uncheck all. This, however, has a problem: if we need to check or uncheck one of the checkboxes, the check-all checkbox cannot automatically judge whether or not to check all. We have to change the value of a check-one checkbox and add a State Change event, as shown below:
Input the JS code:
//If the current checkbox is not checked, set the check-all checkbox as unchecked
if(this.getValue()==false){
_g().setCellValue('A1',null,false);
} else {
var allChecked=true;//If the for loop indicates that all checkboxes are checked, check the check-all checkbox
for(var i=0;i<lineboxes.length;i++){
if(lineboxes[i].getValue()==false){
allChecked=false;
}
}//If all checked, the check-all checkbox in A1 is automatically checked
_g().setCellValue('A1',null,allChecked);
}
2.2 Preview
Save the template and click Data Entry Preview. The preview effect on a PC is shown as below: