layui多选

效果如下，选择某个选项后，会弹出对应输入框填写数据

前端页面代码

<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();
    }
});