【参数界面JS实例】JS实现单选按钮组始终保持选中某一选项

1. 概述
1.1 问题描述

在参数界面，单选按钮组在选中了一个选项后，如果用户再次点击这个选项，按钮会处于未选中状态，这样不够人性化。如果希望单选按钮组始终选中一个，这个要如何实现呢？
设置前：

设置后：

1.2 实现思路

通过给控件添加【初始化后】和【状态改变】JavaScript 事件来实现！

初始化 脚本：

1. var self = this;
   
2. //鼠标点击事件  
   
3. this.$container.on("mousedown", function() {
   
4.     //赋值全局变量 K  
   
5.     self.options.K = self.getValue();
   
6. })
   
7. 状态改变 脚本：
   
8. 
   
9. 
   
10. var value=this.getValue();
    
11. if(value=="" || value==null){
    
12.         this.setValue(this.options.K);
    
13. }
    
14. 或者采用定位到指定控件的方法：
    
15. var obj = this.options.form.getWidgetByName("radioGroup0");
    
16. var value=obj.getValue();
    
17. //不允许为空
    
18. if(value=="" || value==null){
    
19.     this.setValue(this.options.K);  
    
20. }else{
    
21. this.options.K=value;
    
22. }

复制代码

2. 示例
2.1 单选按钮组属性设置

1）在参数面板中添加单选按钮组控件和查询控件：

2）单选按钮组控件值默认为F，定义控件的数据字典为自定义，实际值分别为 F 和 M，显示值分别为女和男，如下图所示：

2.2 添加 JavaScript 事件

1）选中按钮，添加【初始化后】事件：

2）选中按钮，添加【状态改变】事件：

2.3 预览效果

保存报表，点击分页预览，报表效果如下图所示：

注：此方法不支持移动端。

3. 模板下载

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\02-JS实现单选按钮组始终保持选中某一选项.cpt

模板下载见附加