#how all the in between checkboxes are getting selected? I don't understand the logic here

1 messages · Page 1 of 1 (latest)

wet fable
#

can someone please explain me how this is happening since on the first checked it is true but how the in between are true, i mean how all the items in between the first and last check is getting checked, i don't understand the logic?
https://codepen.io/danielhoppener/pen/xxKVbey

if(checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween
 }
 if(inBetween){ checkbox.checked = true
          }

this part, i mean it will check for every input and make that checkbox check property true but here only two item is selected and then how the in between are getting selected

CodePen
Daniel Hoppener
Shift select multiple checkboxes

...

wet sphinx
#

The magic is in forEach. We go through a loop, and when we first meet a checked checkbox, we set inBetween to true. Therefore, each next checkbox will be considered to be between two checked checkboxes until we meet the next checked checkbox. At this point, we set inBetween to false, and each subsequent checkbox until the end will be treated as one that is not between the checked ones.

#

And since we never reset lastChecked, there we have a problem in the logic of the code. Even if we have unchecked a checkbox, it will be treated as lastChecked and, while holding the Shift key, we will check another checkbox, all checkboxes between them will also be checked. Although visually we can assume that we do not yet have the first selected checkbox

wet fable
wet fable
wet fable
wet sphinx
#

The first time we click any checkbox (and don't hold the Shift key because that's also an issue in this code), in the handleCheck function we set lastChecked to that checkbox element and don't enter the loop because our conditions are not satisfied. When we check another checkbox while holding down the Shift key, we already get inside the if block and start executing the loop.

#

We do nothing until we meet some checkbox equal to this or the previous (lastChecked) checked checkbox. It depends on which of them the first or last checked checkbox is higher in the list. Then we switch "inBetween" to the opposite value. And since at first this value was false, now it will be true. We then enter the second if statement and check our current checkbox (it was checked earlier, but that's fine).

wet fable
#

okay this is for the checkbox i have checked what about the in between one

wet sphinx
#

At the next step of the loop, we do not get into the first if statement (unless our checked checkboxes go one after the other). We move to the second if block and check this new checkbox (as our inBetween is true). This repeats until we reach the next checked checkbox (our first or last checked). Then we enter the first if and switch inBetween to false (it was true before), so now we don't enter the next if. We also do nothing for all other steps of the loop.

wet fable
#

okay but as u said for the next step wont it see the first condition is not true and wont it make the inBetween false

#

o sorry

#

it wont run the statement if the condition is not true right?

wet sphinx
#

yes

wet fable
#

it was actually simple i forgot this. and please tell me about the issue since the lastchecked is not changing the issue you mentioned above

#

Thank You so much💜

wet sphinx
# 
function handleCheck( e ) {
    let inBetween =  false;
 if( lastChecked && e.shiftKey && this.checked ) {
        checkboxes.forEach( checkbox => {
            if( checkbox === this || checkbox === lastChecked ) {
                inBetween = !inBetween;
            }
            if( inBetween ) {
                checkbox.checked = true;
            }
        });
    lastChecked = false;
    } else {
    lastChecked = this.checked ? this : false;}
};
#

Something like that

#

But with this code, we can only check the checkboxes by holding down the Shift key, but we can't uncheck them that way.

wet fable
#

the issue is not resolved

#

should i send a screen video of it?

wet sphinx
wet fable
#

sure

wet sphinx
# wet fable sure

Is it okay now? I changed it again. Have no enough time to test it

wet fable
wet sphinx
#

Then we just need to remove lastChecked = false

wet fable
#

let me show you whats happening

wet sphinx
#

We can select checkboxes from the last checked checkbox. When we unchecked some checkbox, we no longer have the last checked checkbox. When we select files by holding down the Shift key and deselect some files with Ctrl, we cannot select additional files again with Shift. This newly selected file becomes the first one selected. This is the standard behavior

#

We can start checking the checkbox from the first checkbox we have checked after unchecking some other checkboxes

wet sphinx
#

Thanks for the interesting challenge!😃

wet fable
wet fable
wet sphinx
wet fable
#

in the video when we deselect all keep one only and then i do the shift and select one so it forgets that there is a checkbox selected before only should it check for it since we are running forEach on it

wet sphinx
wet fable
#

one is remain checked so cant it know that its already selected

wet sphinx
wet fable
#

i saw something

#

its forgetting that one is already selected