I. Overview
When using checkboxes, sometimes you may have to add a limit on the number of selected checkboxes. For example, when the sum of the selected values exceeds a limit, a prompt will appear. How to implement it?
II. Example
2.1 Template design
Create a new template and add a Embedded dataset. Add four columns: Level 1, Level 2, Score and Col 4. The data types are all String, as shown in the figure below:
Insert 8 rows into the dataset, and the data are as follows:
Design the template as shown in the figure below and add a checkbox widget in D3.
The data setting in cell A3 is List, as shown below:
Set the name of checkbox as check1, as shown in the figure below:
2.2 Add event
Add a state change event to the chec box, as shown in the following figure:
The JS code is as follows:
var classOnes = [];
var classTwos = [];
var points = [];
var $span = $('.fr-checkbox-checkon');
var $tds = $("td").has($span);
var $trs = $("tr").has($tds);
for(var i=0; i<$trs.length;i++){
var classOne = $("td:eq(0)",$($trs[i])).html();
classOnes.push(classOne);
var classTwo = $("td:eq(1)",$($trs[i])).html();
classTwos.push(classTwo);
var point = $("td:eq(2)",$($trs[i])).html();
points.push(point);
}
var index=0;
var classAry=[];
var sumAry=[];
sumAry[0]=0;
var aryIndex=0;
for(var i=0;i<classOnes.length;i++){
if(classOnes[i]==classOnes[index]){
classAry[aryIndex]=classOnes[index];
sumAry[aryIndex]=parseInt(points[i])+parseInt(sumAry[aryIndex]);
}else{
index=i;
classAry[++aryIndex]=classOnes[i];
sumAry[aryIndex]=parseInt(points[i]);
}
}
for(var i=0;i<sumAry.length;i++){
if(sumAry[i]>100){
FR.Msg.alert('Prompt','First level menu:'+classAry[i]+', the sum of the selected items exceeds 100, please select again!');
this.setValue(false);
}
}
2.3 Preview effect
Save the template, choose Pagination Preview, and the effect is shown in the following figure:
Note: After testing, the mobile terminal and H5 do not support this effect.