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


Posted in Javascript onSeptember 02, 2019

如下所示:

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显示和隐藏的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
layui复选框的全选与取消实现方法
Sep 02 #Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 #Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 #Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 #Javascript
微信小程序 简易计算器实现代码实例
Sep 02 #Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 #Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 #Javascript
You might like
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
JS实现简单表格排序操作示例
2017/10/07 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
python传递参数方式小结
2015/04/17 Python
python获取本地计算机名字的方法
2015/04/29 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python让列表倒序输出的实例
2018/06/25 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Python实现京东抢秒杀功能
2021/01/25 Python
一套.net面试题及答案
2016/11/02 面试题
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
2014年实习生工作总结
2014/11/27 职场文书
先进党组织事迹材料
2014/12/26 职场文书
个人工作表现自我评价
2015/03/06 职场文书
城南旧事电影观后感
2015/06/16 职场文书
预备党员入党感想
2015/08/10 职场文书