参数表单多个复选框全选

 

在做报表查询时,参数模板中经常会用到复选框,通过复选框的勾选状态来进行数据过滤,当有多个复选框时,经常会有客户希望能否增加一个设置,实现全选或者全部取消的功能,下面介绍下该需求的实现:
参数表单设计如下图:

其中 A2,B2,C2 三个单元格均为复选框,并且对应的 web 变量分别为 arg1,arg2,arg3,在 A1 中增加了一个复选框,通过该复选框的选中状态来控制其他三个的值,此处 A1 使用 html 即可,将 A1 的单元格数据类型改成 html,然后在里边写表达式:全选,可以看到,onclick 是调用了一个 js 函数,所以要在显示报表的 jsp 中增加该 js,并且在该 js 中实现其他复选框的全选或者取消,下面介绍下如何在 js 中控制报表的复选框的状态。
获取单元格属性可以通过如下方法:document.getElementById(‘arg1’),arg1 就是单元格定义的 web 变量名,但是在报表中通过该属性获取的对象是一个隐藏的 input,它的下一个元素才是 checkbox,所以获取复选框的方法为:
        var arg1Input = document.getElementById(‘arg1’);// 获取 arg1
        var box = arg1Input.nextSibling;
        while(box.tagName != “INPUT”) box = box.nextSibling;// 循环找他的下一个元素为 checkbox 的对象
        box.checked = arg.checked;// 根据 A1 复选框的状态控制此复选框是勾中还是取消,并且给单元格设置值,0 和 1 是报表中设置的开值和关值
        arg1Input.value = arg.checked ? “1” : “0”;
这样就是可以设置第一个复选框的状态,其余两个类似,完整的 js 代码如下:

function check(arg){  
  
        var arg1Input = document.getElementById( 'arg1' );  
        var box = arg1Input.nextSibling;  
        while( box.tagName != "INPUT" ) box = box.nextSibling;  
        box.checked = arg.checked;  
        arg1Input.value = arg.checked ? "1" : "0";  
  
                var arg2Input = document.getElementById( 'arg2' );  
        var box2 = arg2Input.nextSibling;  
        while( box2.tagName != "INPUT" ) box2 = box2.nextSibling;  
        box2.checked = arg.checked;  
        arg2Input.value = arg.checked ? "1" : "0";  
  
                        var arg3Input = document.getElementById( 'arg3' );  
        var box3 = arg3Input.nextSibling;  
        while( box3.tagName != "INPUT" ) box3 = box3.nextSibling;  
        box3.checked = arg.checked;  
        arg3Input.value = arg.checked ? "1" : "0";  
    }  
  
  
</script>  

这样就可以实现页面端控制复选框的状态全选或者全部取消,如下图:

更多参数相关类问题请看:参数相关分类导航
* 轻松 get 报表模糊查询技能
* 利用动态参数默认不查询任何数据
* 如何实现参数级联查询
* 参数为空取全部数据的几种做法
* 下拉表关联异步加载不是事儿 - 参数动态过滤