layui 单选项 点击显示与隐藏

  <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>
<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>

 

 

 

  • 6
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值