1.需求

1.1.使用场景

在添加编辑表单，经常会出现根据选项，动态显示和隐藏某些元素。比如添加一个网络设备，当选择通讯方式为串口时，需要填写串口号和波特率；当选择通讯方式为网卡时，需要选择IP地址和子网掩码。串口号和IP地址，不能同时出现，只能二选一。如下图所示的效果。

1.2.解决思路

正常的实现思路，是将这些表单输入框都放到页面上，然后根据通讯方式，进行动态的显示和隐藏。利用框架，可以很容易的配置出全功能的静态表单。如下图所示。

那么如何实现动态的显示和隐藏呢？就是要对按钮的点击事件进行响应，然后控制元素的显示和隐藏。具体的样例，下面进行详细说明。

首先了解表单页面的元素布局。通过框架配置出来的表单页面，所有的输入框都有固定的格式，且每个表单元素组都分配了动态的id值。非常的整齐，也有规律和注释。如下图所示。输入框和标签文字，组成一个form-group，放在一个div下，且该div有id编号。

因此，只需要控制该div的显示和隐藏即可。

2.方案案例

理解了原理后，实现就非常简单了。主要分为两部：监控按钮点击事件、控制div的显示和隐藏。

1）框架只是对表单显示进行渲染，并未增加任何事件监听。我们需要手动对输入框增加监听事件，由于框架对原始输入框进行了二次渲染，因此有些控件的事件监听有些特殊化。下面会针对各种输入框分别说明。

2）div的显示和隐藏，只需要添加样式属性。

针对上面的表单，要隐藏串口号和波特率，只需要隐藏id值为form-group-894和form-group-895的div即可。调用如下2行JS代码即可。

//隐藏串口号输入框
$("#form-group-894").hide();
//隐藏波特率输入框
$("#form-group-895").hide();

//如果要显示，调用
$("#form-group-895").show();

如下图是直接在控制台执行的效果，输入框已被隐藏。

2.1.使用单选按钮

框架使用iCheck对原始单选框进行了渲染，这样效果比较美观。如果要监听事件，则也要使用iCheck的事件进行处理。

单选按钮一般是一组好几个，事件类型也分为单纯点击、值改变、选中、取消选中，所以具体要用哪个事件来监听，确实需要细细对比和品位。

$("input[name='CommunicateType']").on('ifChecked', function(event){
  $(this).val()
});

获取到事件监听后，实现控制显示和隐藏的代码如下。

$("input[name='CommunicateType']").on('ifChecked', function (event) {
	//串口：显示串口号和波特率，隐藏IP地址4个输入框    
	if ("0" === $(this).val()) {
		//显示串口号输入框
		$("#form-group-894").show();
		//显示波特率输入框
		$("#form-group-895").show();

		//隐藏IP地址
		$("#form-group-896").hide();
		//隐藏端口号
		$("#form-group-897").hide();
		//隐藏子网掩码
		$("#form-group-898").hide();
		//隐藏网关
		$("#form-group-899").hide();
	} else {
		//网口：隐藏串口号和波特率，显示IP地址4个输入框
		//隐藏串口号输入框
		$("#form-group-894").hide();
		//隐藏波特率输入框
		$("#form-group-895").hide();

		//显示IP地址
		$("#form-group-896").show();
		//显示端口号
		$("#form-group-897").show();
		//显示子网掩码
		$("#form-group-898").show();
		//显示网关
		$("#form-group-899").show();
	}
});

2.2.使用开关按钮

2.3.使用复选框

2.4.使用下拉框

3.细节处理

首次加载

宽度错位问题

必填项问题。

1、去掉必填项。

2、设置默认值。