Limiting the Number of Selected Checkboxes by JS

Problem

When creating a data entry template for a questionnaire, you may need to limit the number of selected checkboxes within a checkbox group. For example, the number of selected checkboxes is limited to two. If you select more than two checkboxes, all the selected values or the values exceeding the limit in the checkbox group will be cleared, as shown in the following figure.

Implementation Method

You can obtain the value of the current cell by JS, then check the length of the value by the length attribute, and perform the necessary operation.

Template Preparation

Create a template, add a checkbox group widget to cell A1, and bind the custom data (A, B, C, D, and E) to the widget, as shown in the following figure.

JS Event Adding

The JavaScript code differs depending on whether you want to clear all selected values or only the values exceeding the limit in the checkbox group.

Clearing All Selected Values

Add a State Change event to the checkbox group widget, as shown in the following figure.

The JavaScript code is as follows.

var value = this.getValue();
//Obtain the value of the current widget.
if (value.length > 2) {
//Check if the length of the value of the current cell exceeds two.
alert("length is "+value.length+", more than the maximum length 2!");
this.reset();
//Reset the data, namely, to clear all the selected data.
}

Note:

You can also use this.setValue(""); to clear the data.

Clearing the Value Exceeding the limit in the Checkbox Group

Add a State Change event to the checkbox group widget, as shown in the following figure.

The JavaScript code is as follows.

var value = this.getValue();
//Obtain the most recently selected value of the widget.
var oldvalue = _g().getCellValue(0, 0, 0);
//Obtain the originally selected value in cell A1.
if (value.length > 2) {
alert("length is "+value.length+", more than the maximum length 2!");
this.setValue(oldvalue);
//Set the value of cell A1 to the originally selected value.
}

Effect Preview

Clearing All the Selected Values

Save the template, click Data Entry Preview, and select the values of three checkboxes. In this case, "more than the maximum length 2" pops up. Click OK to clear all the data.

The following figure shows the effect on PC.

The following figure shows the preview effect on the DataAnalyst app and the HTML5 terminal.

Clearing the Value Exceeding the Limit in the Checkbox Group

Save the template, click Data Entry Preview, and select the values of three checkboxes. In this case, "more than the maximum length 2" pops up. Click OK to clear the third selected data. The following figure shows the effect.

Clearing all the selected values in the checkbox group:

For details, you can download the template Limiting the Number of Selected Checkboxes (Data Entry) by JS - Example One.cpt.

Clearing the values exceeding the limit in the checkbox group:

For details, you can download the template Limiting the Number of Selected Checkboxes (Data Entry) by JS - Example Two.cpt.