JS复选框勾选项求和判断

1. 概述
1.1 问题描述

场景描述：在实际项目填报中，在使用复选框进行勾选，有时候可能要加一个勾选数量和的限制，那么该如何实现呢？

1.2 实现思路

我们需要在复选框中利用 JS 计算数量的限制，用来控制复选框是否能够继续选择。

2. 示例
2.1 模板设计

新建一张模板，在模板中添加内置数据集，表名：Embedded1；增加四列，名称分别为：一级、二级、分值、ColName4，类型都是字符串的类型，如下图：

向表中插入 8 行，数据如下图：

在单元格 A2、A3 中输入一级、拖拽一级字段；在单元格 B2、B3 中输入二级、拖拽二级字段；在单元格 C2、C3 中输入分值、拖拽分值字段；在 D2、D3 单元格中输入是否，添加下拉复选框，模板样式如下：

最终排放效果图：

A3 单元格中的数据设置是列表形式，如下图：

D3 单元格设置控件名称为 check1，如下图：

2.2 添加事件

给复选框按钮添加状态改变事件，如下图所示：

JS 代码如下：

1. var classOnes = [];   
   
2. var classTwos = [];   
   
3. var points = [];   
   
4. var $span = $('.fr-checkbox-checkon');  //获取选中的复选框  
   
5. var $tds = $("td").has($span); //定义选中复选框的所有单元格      
   
6. var $trs = $("tr").has($tds);   
   
7. for(var i=0; i<$trs.length;i++){      
   
8. var classOne = $("td:eq(0)",$($trs)).html();   //获取选中的A3单元格的值  
   
9. classOnes.push(classOne);     //将选中的值放到数组中  
   
10. var classTwo = $("td:eq(1)",$($trs)).html();   //获取选中的B3单元格的值  
    
11. classTwos.push(classTwo);   
    
12. var point = $("td:eq(2)",$($trs)).html();   //获取选中C3单元格的值  
    
13. points.push(point);      
    
14. }
    
15. //alert(classOnes + ";" + classTwos + ";" + points);
    
16. //按一级分类求和
    
17. //if(parseInt(classOnes&&classTwos&&points) > 0){ }
    
18. var index=0;
    
19. var classAry=[];
    
20. var sumAry=[];
    
21. sumAry[0]=0;
    
22. var aryIndex=0;
    
23. for(var i=0;i<classOnes.length;i++){
    
24.   if(classOnes==classOnes[index]){
    
25.     //alert(classOnes);
    
26.     classAry[aryIndex]=classOnes[index];
    
27.     sumAry[aryIndex]=parseInt(points)+parseInt(sumAry[aryIndex]);
    
28.   }else{
    
29.   //alert(classOnes);
    
30.     index=i;
    
31.     classAry[++aryIndex]=classOnes;
    
32.     sumAry[aryIndex]=parseInt(points);
    
33.    
    
34.   }
    
35. }
    
36. //alert(classAry+";"+sumAry);
    
37. //校验是否有超100，有则当前值置为否
    
38. for(var i=0;i<sumAry.length;i++){
    
39. if(sumAry>100){
    
40. FR.Msg.alert('提示','一级菜单:'+classAry+',选中项之和超过100,请重新选择!');
    
41. this.setValue(false);
    
42. }
    
43. }

复制代码

2.3 预览效果

保存模板，选择填报预览，效果如下图所示：

注：经过测试，手机端和 H5 不支持该效果。

3. 模板下载

模板效果在线查看请点击：JS 复选框勾选项求和判断.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\03-JS复选框勾选项求和判断.cpt

点击下载模板：03-JS复选框勾选项求和判断.cpt

点击超过100提示后不会清空再选吗？