添加和删​​除复选框，取决于输入值

Question

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

$(document).ready(function () {

            $('#cycle_length').bind("input", function() {
                var cycleLength = this.value;
                var deletedItems = 7 - cycleLength;
                if (cycleLength < 7){
                    for (var i = 0; i <= deletedItems; i++){
                        $(".day"+i).detach();
                        var detached = $('.day').detach();
                    }
                }
                var currentDays =  $('.check-day').length;
                if (currentDays < cycleLength){
                    var addedItems = cycleLength - currentDays;
                    for (var i = 0; i<= addeditems; i++){
                        $('body').append(detached);
                    }
                }
            });     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div class="checkbox check-day day7">
   <input type="checkbox" id="day1">DAY1
</div>
<div class="checkbox check-day day6">
   <input type="checkbox" id="day2">DAY2
</div>
<div class="checkbox check-day day5">
   <input type="checkbox" id="day3">DAY3
</div>
<div class="checkbox check-day day4">
   <input type="checkbox" id="day4">DAY4
</div>
<div class="checkbox check-day day3">
   <input type="checkbox" id="day5">DAY5
</div>
<div class="checkbox check-day day2">
   <input type="checkbox" id="day6">DAY6
</div>
<div class="checkbox check-day day1">
   <input type="checkbox" id="day7">DAY7
</div>

Answer 1

这个怎么样？我已经简化了一些代码，可以随意添加div以根据需要组织复选框。请参阅代码下方每个代码块的说明。

HTML

<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>

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

Javascript（script.js）

$(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');
                }   
            }
        }
    });
});

在javascript中，我们检测到在#cycle_length文本框.change()中输入新号码的时间。请注意，当您编写新号码时，必须按ENTER才能加载新值。

接下来我们检查值是<= 7（原因很明显）。然后我们循环遍历值1到7（包括）并将值记录到控制台，以便我们可以看到一切正常。第一个if语句检查此特定日期小于文本框中给出的值。如果是，则显示该复选框和标签。如果没有，则隐藏复选框和标签。

如果您想在新行上分别添加复选框，则可以将'inline'更改为'block'。

这是一个JS Fiddle，其中有一个工作示例。

我希望这会有所帮助。