监听文本框，动态生成复选框

最新推荐文章于 2023-10-24 15:56:24 发布

转载最新推荐文章于 2023-10-24 15:56:24 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lishuo2553068/p/10997500.html

文章标签：

#javascript #ViewUI

本文介绍如何使用layui框架实现输入框数字变化时，动态生成相应数量的复选框。通过JS监听按钮点击事件，更新数字并添加或移除复选框，适用于需要动态增减选项的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中需要利用文本框，输入数字，然后页面出现相应的几个复选框，因为项目用的是layui，我用的是layui的方法，其实用别的也同样适用。

1.jsp：

<div class="layui-container">
   <form class="layui-form" action="" style="margin-top: 100px;">
       <div class="layui-form-item">
           <label class="layui-form-label">输入框</label>
           <div class="layui-input-inline" style="width: 50px;margin: 0;">
               <button id="minus" type='button' class="layui-btn"><i class="layui-icon layui-icon-left"></i></button>
           </div>
           <div class="layui-input-inline" style="width: 50px;margin: 0;">
               <input id="num" type="number" value="1" class="layui-input" disabled="">
           </div>
           <div class="layui-input-inline" style="width: 50px; margin: 0;">
               <button id="add" type='button' class="layui-btn"><i class="layui-icon layui-icon-right"></i></button>
           </div>
       </div>
       <div class="layui-form-item" pane="">
       <label class="layui-form-label">原始复选框</label>
       <div class="layui-input-block" id="check">
       <input type="checkbox" name="like1[read]" lay-skin="primary" title="1路">
       </div>
       </div>
   </form>
</div>

2.js：

layui.use('form', function(){
       var form=layui.form;
       var $= layui.$;
       $('#add').on('click',function(){
           var num= parseInt($('#num').val())+1;
           $('#num').val(num);
           $('#check').append('<input type="checkbox" name="like1[read]" lay-skin="primary" title="'+(num)+'阅读">');
           form.render('checkbox');
       });
       $('#minus').on('click',function(){
           if($('#check>input').length > 0){
               var num= parseInt($('#num').val())-1;
               $('#num').val(num);
               $('#check>input:last')[0].remove();
               $('#check>div:last')[0].remove();
               form.render('checkbox');
           }
       });
   });