layui radio点击事件实现input显示和隐藏的例子

如下所示：

前端代码

<link rel="stylesheet" href="/static/index/layui/css/layui.css" rel="external nofollow" >
<script type="text/javascript" src="/static/index/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/index/js/jquery-3.3.1.min.js" charset="utf-8"></script>
<form class="layui-form" action="">
 <div class="layui-form-item">
  <label class="layui-form-label" style="width:100px">是否已购买：</label>
  <div class="layui-input-block" id="IsPurchased" >
   <input type="radio" name="t" value="购买" title="购买" lay-filter="aaa"/>
   <input type="radio" name="t" value="试用" title="试用" lay-filter="aaa"/>
  </div>
 </div>
 <div class="layui-form-item count">
  <label class="layui-form-label">试用次数：</label>
  <div class="layui-input-inline">
   <input type="text" id="ProbationAccount" required="required" placeholder="请输入试用次数" autocomplete="off" class="layui-input" />
  </div>
  <div class="layui-form-mid layui-word-aux"></div>
 </div>
 
</form>
 <script>
 
  layui.use('form', function () {
   var form = layui.form;
 
   form.on('radio(aaa)', function (data) {
 
    if ($('#IsPurchased input[name="t"]:checked ').val() == "购买") {
     $(".count").hide();
    }
    else {
     $(".count").show();
    }
    form.render();
   });
  });
 
 
 </script>

以上这篇layui radio点击事件实现input显示和隐藏的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• layui监听select变化,以及设置radio选中的方法
• 浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
• layui中select，radio设置不生效的解决方法
• 解决layui的使用以及针对select、radio等表单组件不显示的问题
• 解决layui 表单元素radio不显示渲染的问题
• layui radio单选限制下一个radio单选的实例
• layui 实现自动选择radio单选框(checked)的方法
• Layui之table中的radio在切换分页时无法记住选中状态的解决方法
• layui中使用jquery控制radio选中事件的示例代码
• layui radio性别单选框赋值方法
• 解决layui的radio属性或别的属性没显示出来的问题