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

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并附有一个工作示例。

我希望这有帮助。