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

赞 (0)

相关推荐

  • layui radio性别单选框赋值方法

    Html <div class="layui-inline"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="sex" id="sex" value="1" t

  • layui中使用jquery控制radio选中事件的示例代码

    勾选 form.on('radio(yesHave)', function (data) { $("input[name='hasPrepaidVoucher'][title='有']").attr('checked',true); form.render(); }); 取消勾选 form.on('radio(noIssuer)', function (data) { debugger; $("input[name='voucherIssuer']").remove

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

  • JS实现点击参数面板按钮显示或隐藏数据

    JS实现点击参数面板按钮显示或隐藏数据

    当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板添加一个标签控件,控件名为lable,设置标签控件不可见,控件值为"显示". 在参数面板添加一个按钮控件,控件名为button,控件值为"只显示合计数据",并添加点击事件. 编辑点击事件,添加下面的JavaScript代码: 点击参数面板空白处,将"点击查询前

  • vue使用hightcharts自定义图例点击事件

    vue使用hightcharts自定义图例点击事件

    本文实例为大家分享了vue使用hightcharts自定义图例点击事件的具体代码,供大家参考,具体内容如下 highcharts图表自带的图例点击事件是:点击某个显示/隐藏的图例,该图例对应的series就隐藏/显示. 需求方这边的需求是: 1.默认全部展示所有分类2.点击某一个分类,则隐藏其他分类3.如果再次点击这个分类,则全部显示4.如果点击了A,再点击了B,则显示A和B 于是乎只能自定义图例点击事件. // 数据列展示/隐藏的逻辑函数 getVisibleMode(series, seri

  • vue使用highcharts自定义图例点击事件

    vue使用highcharts自定义图例点击事件

    本文实例为大家分享了vue使用highcharts自定义图例点击事件的具体代码,供大家参考,具体内容如下 highcharts图表自带的图例点击事件是:点击某个显示/隐藏的图例,该图例对应的series就隐藏/显示. 需求方这边的需求是: 1.默认全部展示所有分类2.点击某一个分类,则隐藏其他分类3.如果再次点击这个分类,则全部显示4.如果点击了A,再点击了B,则显示A和B 于是乎只能自定义图例点击事件. // 数据列展示/隐藏的逻辑函数 getVisibleMode(series, serie

  • 基于vue 实现表单中password输入的显示与隐藏功能

    实现效果: 点击 "眼睛" 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  • jQuery框架实现元素显示及隐藏三种动画方式

    jQuery框架实现元素显示及隐藏三种动画方式

    目录 一.默认方式显示和隐藏 二.滑动方式显示和隐藏 三.淡入淡出方式显示和隐藏 四.案例:广告的自动显示和隐藏 本文分享自华为云社区<jQuery框架实现元素显示及隐藏动画[附案例分析]>,原文作者:灰小猿. 首先来看一个简单的动画效果图: ​ 我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作,所以上面显示和隐藏的也只是一个div,而并不是一个图片.下面我就来和小伙伴们讲一个如何对元素的属性进行操作,使其显示或者隐藏! 在jQuery框架中对元素对象进行显

  • 解决layui的使用以及针对select、radio等表单组件不显示的问题

    layui是国内一款界面比较整洁大方的ui框架,里面封装了很多前端开发常用的组件,通常我们直接复制代码过去就可以实现效果,可以提高我们的开发效率. 使用步骤: 1.下载layui:https://www.layui.com 2.将layui文件夹复制到自己的项目里: 3.在html页面引入相关的css和js: <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"

  • layui当点击文本框时弹出选择框,显示选择内容的例子

    实现如图所示的功能 实现步骤: 1.html页面需要注意的内容 1). table <div id="hidden1" lay-filter="hidden1" style="display: none"> <table id="department_result" lay-filter="department_result"></table> </div>

  • 浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)

    若是只引用jquery的话,监听单选按钮改变事件如下: <input type="radio" name="sex" checked="checked" value="1">男 <input type="radio" name="sex" value="2">女 $(document).ready(function() { $('input[t

  • layui问题之模拟select点击事件的实例讲解

    一.问题 不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变 二.经过 刚开始查看layui官方文档,发现仅仅只是有select监听事件,即: form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 }); 但是,这个事件需要操作页面,不可取. 三.结果 查

随机推荐