JS复选框勾选项求和判断
1. 描述
场景描述：在实际项目填报中，在使用复选框进行勾选，有时候可能要加一个勾选数量和的限制，那么该如何实现呢？
2. 思路
我们需要在复选框中利用js计算数量的限制，用来控制复选框是否能够继续选择。
3. 操作步骤
3.1 模板设计
新建一张模板，在模板中添加内置数据集，表名：Embedded1；增加四列，名称分别为：一级、二级、分值、ColName4，类型都是字符串的类型，如下图：
向表中插入8行，数据如下图：
在单元格A2、A3中输入一级、拖拽一级字段；在单元格B2、B3中输入二级、拖拽二级字段；在单元格C2、C3中输入分值、拖拽分值字段；在D2、D3单元格中输入是否，添加下拉复选框，模板样式如下：
最终排放效果图：
A3单元格中的数据设置是列表形式，如下图：
D3单元格设置控件名称为check1，如下图：
3.2 添加事件
给复选框按钮添加状态改变事件，定义参数b，值为公式：row()；参数 isCheck，值为公式：$$$，如下图所示：
JS代码如下：
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(); //获取选中的A3单元格的值
classOnes.push(classOne); //将选中的值放到数组中
var classTwo = $("td:eq(1)",$($trs[i])).html(); //获取选中的B3单元格的值
classTwos.push(classTwo);
var point = $("td:eq(2)",$($trs[i])).html(); //获取选中C3单元格的值
points.push(point);
}
//alert(classOnes + ";" + classTwos + ";" + points);
//按一级分类求和
//if(parseInt(classOnes&&classTwos&&points) > 0){ }
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]){
//alert(classOnes[i]);
classAry[aryIndex]=classOnes[index];
sumAry[aryIndex]=parseInt(points[i])+parseInt(sumAry[aryIndex]);
}else{
//alert(classOnes[i]);
index=i;
classAry[++aryIndex]=classOnes[i];
sumAry[aryIndex]=parseInt(points[i]);
}
}
//alert(classAry+";"+sumAry);
//校验是否有超100，有则当前值置为否
for(var i=0;i<sumAry.length;i++){
if(sumAry[i]>100){
FR.Msg.alert('提示','一级菜单:'+classAry[i]+',选中项之和超过100,请重新选择!');
this.setValue(false);
}
}
4. 预览效果
4.1 PC端预览效果
保存后，点击填报预览，效果如描述中所示。
注：经过测试，手机端和h5不支持该效果。
5. 已完成模板
模板效果在线查看请点击：JS复选框勾选项求和判断.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\03-JS复选框勾选项求和判断.cpt
附件列表
文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）