快捷導(dǎo)航

layui radio點擊事件實現(xiàn)input顯示和隱藏的例子

更新時間：2019年09月02日 15:31:49 作者：zz_lkw

今天小編就為大家分享一篇layui radio點擊事件實現(xiàn)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">試用次數(shù)：</label>
  <div class="layui-input-inline">
   <input type="text" id="ProbationAccount" required="required" placeholder="請輸入試用次數(shù)" 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點擊事件實現(xiàn)input顯示和隱藏的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Javascript 引擎工作機制詳解
我們需要引入幾個相關(guān)的概念：執(zhí)行環(huán)境棧、全局對象、執(zhí)行環(huán)境、變量對象、活動對象、作用域和作用域鏈等，這些概念正是JS引擎工作的核心組件。這篇文章的目的不是孤立的為你講解每一個概念需要的朋友可以參考下
2016-11-11
在Uniapp中獲取用戶地理位置的實現(xiàn)方法
本文詳細(xì)介紹了如何在Uniapp中獲取用戶的地理位置,包括申請高德地圖的Key、配置定位功能以及實現(xiàn)定位功能的代碼示例,感興趣的小伙伴跟著小編一起來看看吧
2025-02-02
JavaScript事件處理的方式(三種)
最近這段時間因為每天要修改網(wǎng)站，為網(wǎng)站做特效，所以看了很多的js接觸事件，自己只會使用一小部分，有時用的時候也比較混亂，現(xiàn)在系統(tǒng)的整理了一下，特此分享到腳本之家平臺供大家參考下
2016-04-04
淺談JavaScript 中的延遲加載屬性模式
改善性能的最好方法之一是避免重復(fù)兩次相同的工作。因此，只要可以緩存結(jié)果供以后使用，就可以加快程序的速度。延遲加載屬性模式技術(shù)使任何屬性都可以成為緩存層以提高性能。這里說到的延遲加載屬性模式就是利用的訪問器屬性，將計算昂貴的操作推遲到需要時再使用
2021-06-06
《JavaScript高級程序設(shè)計》閱讀筆記（二） ECMAScript中的原始類型
ECMAScript有5種原始類型(primitive type)，即Undefined、Null、Boolean、Number和String。ECMAScript提供了typeof來判斷值的類型
2012-02-02
微信小程序圖片選擇區(qū)域裁剪實現(xiàn)方法
本篇文章主要介紹了微信小程序圖片選擇區(qū)域屏裁剪實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
JavaScript高級程序設(shè)計 DOM學(xué)習(xí)筆記
DOM是針對XML和HTML文檔的一個API：即規(guī)定了實現(xiàn)文本節(jié)點操控的屬性、方法，具體實現(xiàn)由各自瀏覽器實現(xiàn)。
2011-09-09
一篇文章讓你輕松記住js的隱式轉(zhuǎn)化
這篇文章主要給大家介紹了如何通過一篇文章讓你輕松記住js的隱式轉(zhuǎn)化的相關(guān)資料,通過在各種情況下發(fā)生的隱式類型的例子,來詳細(xì)的了解隱式類型轉(zhuǎn)換的過程,需要的朋友可以參考下
2022-01-01
關(guān)于微信小程序?qū)崿F(xiàn)云支付那些事兒
我們在做小程序支付相關(guān)的開發(fā)時,總會遇到這些難題,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)云支付那些事兒,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2021-09-09
JavaScript event對象整理及詳細(xì)介紹
這篇文章主要介紹了JavaScript event對象整理及詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
2016-10-10