layUI实现点击不同的radio展示不同的表单

需求： 根据需求，新建表单时，选择不同的radio表单中的内容需要发生变化

思路： 当radio被点击时获取到当前选中的radio值，判断value值控制表单中对应内容的展示
前端代码：

<form class="layui-form" id="mainForm" method="post" action="${mbase}/doWorkflowExecute.action">
                    <div class="layui-input-block" >
                        <input type="radio" id="oaaoType" name="oaaoType" lay-filter="radio-type"  value="0" title="因公外出" checked="checked">
                        <input type="radio" id="oaaoType" name="oaaoType" lay-filter="radio-type"  value="1" title="因私离杭">
                        <input type="radio" id="oaaoType" name="oaaoType" lay-filter="radio-type"  value="2" title="会议、活动和培训">
                    </div>
                    
	               <div id="radioType1">
	           			    点击按钮1展示的内容
					</div>

					 <div id="radioType2">
              			 	点击按钮2展示的内容
					</div>
					 <div id="radioType3">
              				 点击按钮3展示的内容
					</div>

JS代码

 layui.use(['element', 'form'], function () {
        var element = layui.element;
        var form = layui.form;
        //选择审批类型时，显示对应的表单内容
        form.on('radio(radio-type)', function (data) {  //radio-type为lay-filter的属性值
            console.log(data.value)
            if (data.value === "0") {
                $("#radioType1").show();
                $("#radioType2").hide();
                $("#radioType3").hide();
            } else if(data.value === "1") {
                $("#radioType1").hide();
                $("#radioType2").show();
                $("#radioType3").hide();
            }else {
                $("#radioType1").hide();
                $("#radioType2").hide();
                $("#radioType3").show();
            }

        });
    })

扩展： 三个div中的有不同的属性，但也有一些公用的属性，之前并未做处理 ，导致在提交以后后端存储的数据出现问题。原因是：多个div都有的字段在提交时，虽然我们只看到了展示的那个字段，但由于未显示的div中含有相同name的字段。name属性与后端的model可以进行映射，最终造成model中的该字段的值为“，，1”这种形式。