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

 更新时间:2019年09月02日 15:31:49   作者:zz_lkw  
今天小编就为大家分享一篇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显示和隐藏的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Webpack实现按需打包Lodash的几种方法详解

    Webpack实现按需打包Lodash的几种方法详解

    这篇文章主要给大家介绍了关于Webpack实现按需打包Lodash的几种方法,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • js下判断 iframe 是否加载完成的完美方法

    js下判断 iframe 是否加载完成的完美方法

    一般来说,我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成。
    2010-10-10
  • ES6正则表达式扩展笔记

    ES6正则表达式扩展笔记

    正则表达式是javascript操作字符串的一个重要组成部分,然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新。本文将详细介绍ES6正则表达式扩展
    2017-07-07
  • js实现动态加载脚本的方法实例汇总

    js实现动态加载脚本的方法实例汇总

    这篇文章主要介绍了js实现动态加载脚本的方法,以实例形式汇总并分析了几种常用的JavaScript动态加载脚本的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-11-11
  • js打印纸函数代码(递归)

    js打印纸函数代码(递归)

    js打印纸函数代码,获取并设置打印纸的具体信息的代码,需要的朋友可以参考下。
    2010-06-06
  • js中switch语句的学习笔记

    js中switch语句的学习笔记

    在本文里小编给各位分享的是关于js中switch语句的使用方法及学习笔记内容,有兴趣的朋友们可以参考下。
    2020-03-03
  • 网页中的图片的处理方法与代码

    网页中的图片的处理方法与代码

    昨天的一篇 图片的alt属性 文章评论中的启发,特将网页中的图片的一些处理方法 小小的总结一下
    2009-11-11
  • cordova入门基础教程及使用中遇到的一些问题总结

    cordova入门基础教程及使用中遇到的一些问题总结

    这篇文章主要给大家介绍了关于cordova的入门基础教程以及在使用中遇到的一些问题,文中通过示例代码一步步介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • 浅谈原生JS中的延迟脚本和异步脚本

    浅谈原生JS中的延迟脚本和异步脚本

    下面小编就为大家带来一篇浅谈原生JS中的延迟脚本和异步脚本。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS实现二维数组元素的排列组合运算简单示例

    JS实现二维数组元素的排列组合运算简单示例

    这篇文章主要介绍了JS实现二维数组元素的排列组合运算,结合实例形式分析了javascript针对二维数组的遍历、排列组合运算等相关操作技巧,需要的朋友可以参考下
    2019-01-01

最新评论