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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
Vue实现简易计算器
Feb 25 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
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
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
PHP之header函数详解
2021/03/02 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
js实现无缝滚动图
2017/02/22 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python正则表达式匹配中文用法示例
2017/01/17 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python实现C4.5决策树算法
2018/08/29 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Python tcp传输代码实例解析
2020/03/18 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
公司晚会策划方案
2014/05/17 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
教师年终个人总结
2015/02/11 职场文书