最近项目中需要利用文本框，输入数字，然后页面出现相应的几个复选框，因为项目用的是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.实现方式
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论