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

如下所示:

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容