layui 单选项点击显示与隐藏很实用

雨点打透心脏的1/2处 2022-08-29 09:43 257阅读 0赞

html

<div class="layui-form-item">
          <label class="layui-form-label">类型</label>
          <div class="layui-input-block">
    	      <input type="radio" name="type" lay-filter="type" value="0" title="PC" { if $rs.type==0}checked{ /if}>
    	      <input type="radio" name="type" lay-filter="type" value="1" title="APP/小程序" { if $rs.type==1}checked{ /if}>
          </div>
      </div>
      
     <div class="layui-form-item" id="pc_url">
          <label class="layui-form-label">URL链接</label>
          <div class="layui-input-block">
            <input type="text" name="url" value="{ $rs.url}" placeholder="输入链接" autocomplete="off" class="layui-input" >
          </div>
     </div>
     
      <div class="layui-form-item" id="app_url" style="display: none;">
        <div class="layui-inline">
          <label class="layui-form-label">URL链接</label>
          <div class="layui-input-inline">
    	      <select name="url1" lay-filter="url1" lay-verify="required">
    	        <option value="">链接到栏目</option>
    	        { volist name="menu_rs" id="vo"}
    	        <option value="{ $vo.id},{ $vo.controller}">{ $vo.title}</option>
    	        { /volist}
    	      </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">落地页</label>
          <div class="layui-input-inline">
    	      <select name="url2" id="url2" >
    	        <option value="">链接到具体网页</option>
    	        <option value="0">北京</option>
    	        <option value="1">上海</option>
    	        <option value="2">广州</option>
    	        <option value="3">深圳</option>
    	        <option value="4">杭州</option>
    	      </select>
          </div>
        </div>
      </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70]: /images/20220829/089be4b6351a4d10bdd2515e4982fa47.png