CODEWITHSUNDEEP
javascriptjquerycheckbox
Nadia
Nadia

Reputation: 209

Add and remove checkboxes, depends of input value

I have a text field that contains the number of days per training cycle, the default is 7 days, and I have 7 checkboxes to represent day. I have to remove the excess according to the number typed into the text field, and I must later add more if the user changes the value. I managed to remove but I fail to reinsert the deleted boxes.

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

Upvotes: 1

Views: 117

Answers (1)

James McCormac
James McCormac

Reputation: 1695

How about this? I've simplified a little your code, feel free to add the divs back in to organise the checkboxes as you wish. See explanation of each code block below the code.

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>

I've written the javascript in file called script.js and included it (see below). The series of checkboxes are set up, each wrapped in a label. The checkboxes have an ID each, as do the labels. Using a label to wrap the checkbox allows us to remove and replace the checkbox and the label using the label ID only.

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

In the javascript we detect when a new number is entered into the text box #cycle_length with .change(). Note that when you write a new number you must press ENTER for it to load the new value.

Next we check that the value is <= 7 (for obvious reasons). Then we loop over the values 1 to 7 (inclusive) and log the values to the console so we can see things are OK. The first if statement checks this particular day is less than the value given in the text box. If so, then that checkbox and label is shown. If not, the checkbox and label are hidden.

You can change 'inline' to 'block' if you want checkboxes each on a new line.

Here is a JS Fiddle with a working example.

I hope this helps.

Upvotes: 1

Related Questions