效果如下,选择某个选项后,会弹出对应输入框填写数据
前端页面代码
<style> legend { font-size: 12px; font-weight: inherit; color: #03A9F4; } </style>
<div class="layui-form-item"> <label class="layui-form-label">功能选择:</label> <div class="layui-input-block"> <input type="checkbox" name="logReport" id="system-room-logReport" title="日志上报" lay-skin="primary" checked> <input type="checkbox" name="receiveFTP" id="system-room-receiveFTP" lay-filter="system-room-receiveFTP" title="接收FTP" lay-skin="primary"> <input type="checkbox" name="transferFTP" id="system-room-transferFTP" lay-filter="system-room-transferFTP" title="转存FTP" lay-skin="primary"> <input type="checkbox" name="transferKafka" id="system-room-transferKafka" lay-filter="system-room-transferKafka" title="转存Kafka" lay-skin="primary"> </div> </div>
<div class="transferFTP"> <fieldset class="transferFTP layui-elem-field layui-field-title" > <legend>转存FTP配置</legend> </fieldset> <div class="layui-input-inline"> <div class="layui-input-inline" style="margin-bottom: 15px"> <label class="layui-form-label" style="width: 120px">转存FTP地址</label> <input type="text" name="ip" placeholder="请输入转存FTP服务器IP地址" autocomplete="off" class="layui-input" style="width:300px;" value="#(ip)"> </div> <div class="layui-input-inline" style="margin-bottom: 15px"> <label class="layui-form-label" style="width: 100px">转存FTP端口</label> <input type="text" name="port" placeholder="请输入转存FTP服务器端口" autocomplete="off" class="layui-input" style="width:166px;" value="#(port)"> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width: 120px">转存FTP帐号</label> <input type="text" name="username" placeholder="请输入登录转存FTP服务器帐号" autocomplete="off" class="layui-input" style="width:600px;" value="#(username)"> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width: 120px">转存FTP密码</label> <input type="password" name="password" placeholder="请输入登录转存FTP服务器密码" autocomplete="off" class="layui-input" style="width:600px;" value="#(password)"> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width: 120px">转存FTP目录</label> <input type="text" name="savePath" placeholder="请输入转存FTP存储路径" autocomplete="off" class="layui-input" style="width:600px;" value="#(savePath)"> </div> </div> </div>
JS代码
form.on('checkbox(system-room-transferFTP)', function(data){ if(data.elem.checked){ $('.transferFTP').show(); }else{ $('.transferFTP').hide(); } });