監聽文本框，動態生成複選框

最近項目中須要利用文本框，輸入數字，而後頁面出現相應的幾個複選框，由於項目用的是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');
            }
        });
    });

3.實現方式