Javascript 根据输入值添加和删除复选框

我有一个文本字段，其中包含每个培训周期的天数，默认值为7天，我有7个复选框来表示一天。我必须根据文本字段中键入的数字删除多余的值，如果用户更改了值，我必须稍后添加更多。我设法删除了，但未能重新插入已删除的框

$（文档）.ready（函数（）{
$（'#循环长度'）。绑定（“输入”，函数（）{
var CycleleLength=该值；
var deletedItems=7-循环长度；
if（循环长度<7）{
对于（var i=0；i这个如何？我已经简化了您的代码，可以随意添加div来组织复选框。请参阅代码下面每个代码块的解释

HTML

周期
天
第1天
第2天
第三天
第4天
第5天
第6天
第7天

我已经在名为script.js的文件中编写了javascript并将其包括在内（见下文）。设置了一系列复选框，每个复选框都用标签包装。复选框和标签都有一个ID。使用标签包装复选框允许我们删除和替换复选框，并且只使用标签ID

Javascript（script.js）
$（文档）.ready（函数（）{
$（'#循环长度'）。更改（函数（）{
如果（this.value）你为什么不干脆
隐藏
和
显示
它们，而不是添加和删除它们？我不知道如何在最后一个复选框之后始终显示它们，谢谢@James，这对我帮助很大
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="script.js"></script>

<label>Cycle</label>
<input type="text" id="cycle_length">
<label>Days</label>

<label id="d1"><input type="checkbox" id="day1">DAY1</label>
<label id="d2"><input type="checkbox" id="day2">DAY2</label>
<label id="d3"><input type="checkbox" id="day3">DAY3</label>
<label id="d4"><input type="checkbox" id="day4">DAY4</label>
<label id="d5"><input type="checkbox" id="day5">DAY5</label>
<label id="d6"><input type="checkbox" id="day6">DAY6</label>
<label id="d7"><input type="checkbox" id="day7">DAY7</label>

$(document).ready(function(){
    $('#cycle_length').change(function(){
        if (this.value <= 7){       
            for (var i=1; i<7+1; i++){
                console.log(i)
                if (i<= this.value){
                    $('#d'+i).css('display','inline');
                } else {
                    $('#d'+i).css('display','none');
                }   
            }
        }
    });
});