JS Select All the Checkboxes-FineReport Help Document

Last update：December 15, 2020

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);
}