反馈已提交

网络繁忙

JS限制复选框选中个数

  • 文档创建者:lu123
  • 历史版本:19
  • 最近更新:Leo.Tsai 于 2021-10-20
  • 1. 概述

    1.1 问题描述

    制作调查问卷类的填报模板时,可能会需要限制复选框组选中的个数,如限制复选框的个数为 2 个,若超过 2 个就则将所有选中的值清空或者清空超出的部分,如下图所示:

    222

    1.2 实现思路

    通过 JS 获取当前单元格的值,然后通过 length 属性判断长度并进行操作。

    2. 示例

    2.1 准备模板

    新建模板,在 A1 单元格中添加一个「复选按钮组控件」,为其绑定自定义数据数据 A、B、C、D、E,如下图所示:

    image.png

    2.2 添加 JS 事件

    实现将所有选中的值清空或清空超出的部分,JS代码是不同的。

    2.2.1 清空所有选中的值

    给复选框组控件增加一个「状态改变」事件,如下图所示:

    image.png

    JavaScript 代码如下:

    var value = this.getValue();
    //获取当前控件的值
    if (value.length > 2) {
    //判断当前单元格的值的长度是否超过2个
    alert("长度为" + value.length + ",超过最大长度2了!");
    this.reset();
    //将数据重置即清空选中的数据
    }

    注:也可以使用 this.setValue("");来清空数据。

    2.2.2 清空超出部分的值

    给复选框组控件增加一个「状态改变」事件,如下图所示:

    image.png

    JavaScript 代码如下:

    var value = this.getValue();
    //获取控件最新选中的值
    var oldvalue = _g().getCellValue(0, 0, 0);
    //获取A1单元格原来选中的值
    if (value.length > 2) {
    alert("长度为" + value.length + ",超过最大长度2了!");
    this.setValue(oldvalue);
    //将A1单元格的值设置为原来选中的值
    }

    2.3 预览效果

    2.3.1 清空所有选中的值

    保存模板,点击「填报预览」,选中 3 个复选框的值会弹出“超出最大长度 2”,点击确定后,数据清空。

    PC 端效果如下图所示:

    222

    App 及 HTML5 效果如下图所示:

    222


    2.3.2 清空超出部分的值

    保存模板,点击「填报预览」,选中 3 个复选框的值会弹出“超出最大长度 2”,点击确定后,只清空了第三个选中的数据。如下图所示:

    222



    3. 模板下载

    清空所有选中的值:

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\51-JS限制复选框(填报)选中个数示例一.cpt

    点击下载模板:51-JS限制复选框(填报)选中个数示例一.cpt

    清空超出部分的值:

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\51-JS限制复选框(填报)选中个数示例二.cpt

    点击下载模板:51-JS限制复选框(填报)选中个数示例二.cpt

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持