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>

js

<script> layui.use(['element','form','jquery'], function(){var form = layui.form,element = layui.element,$= layui.$;form.on('radio(type)', function(data){ // console.log(data.value); //被點擊的radio的value值if(data.value == 1){$("#app_url").show();$("#pc_url").hide();}else{$("#pc_url").show();$("#app_url").hide();}}); }); </script>

總結

以上是生活随笔為你收集整理的layui 单选项 点击显示与隐藏 很实用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。