JS Checkbox Challenge!  

Thank you for all the effort you put into these videos.

Simply genius, Wes. Thanks! These flags can do some real magic with little code, and then you try to do it without the flag - it takes too much time and effort.

Nice video, nice tutorials, nice channel! Thank you! Good luck!

I learn coding through fun and laughing in videos. I really enjoy it.

really awesome tutorial, thank you ;)

Love this series

Really nice solution! There is a small bug where if you check a box, then uncheck it, then hold shift and click it again for a third time, all the boxes below it get checked as well. The way I fixed this was to simply add a check to confirm that the lastChecked is not the currently checked box. Before: if (e.shiftKey && this.checked) After : if (e.shiftKey && this.checked && lastChecked != this)

I love how simple your code is! I tried to first generate a list, where each task had a data property (with its index: 0,1,2...). Get the indexes of previously clicked and current clicked checkboxes. Generate indexes between these checkboxes. And only then (having indexes of the checkboxes between) iterate through the array and change the state of a checkbox . Your tutorials are very good.

Forget trying I had a hard time wrapping my head around this code ,but it cleared lot of my concepts.

amazing man you rock!!!!

I retrieved first clicked element and the second, then just filtered the checkboxes array and set filtered items to the state of the first clicked element. So there's no trouble with lastChecked stored as let.

A couple bugs in addition to the one Nilson listed: If you check a box, uncheck it, then hold shift and click somewhere else it will still check all in between. I fixed this by adding to the if statement: && lastChecked.checked). If you hold shift for the first box you check it will check all boxes below. This is fixed with my above solution but will throw an error because lastChecked is undefined on the first check. So I just assigned lastChecked to the first checkbox: let lastChecked = checkboxes[0];. You could also add a typeof if statement to check if lastChecked is undefined before the main if statement.

So much nicer than the way I figured out. I used one flag (counter = false) and looped over the checkboxes, but to do that I had to force the nodelist into an array: Array.from(checks). While there, I just set the counter to true the first checked box I found, checked the rest, until I came to one that wasn't checked, and then set the counter back to false and breaked. Pretty hacky, but it worked!

amazingly useful , thanks a lot

Not sure if this is a good solution but it works haha. 1. I kept track of shift-clicked item and last non-shift clicked item. 2. Used indOf on the input array to get their positions then used slice to return array of all items in between. 3. I then looped through the sliced array and just marked all items to "checked = true"

you make it pretty easy and funny!! =)

i need to know the intro songs

Cool script. I find it nice that if I click a checkbox while holding SHIFT it will check all boxes below that. that gives a quick check all from a a given starting point. Now I need to mod the script to perform an uncheck range

that's great logic applied

Now how can I set this up so that it can delete the check boxes that are checked and outside of the isbetween = true; valued dom.elements

yay ~ was able to solve this challenge by myself

If i use an arrow function for handle check then how can i assign the this variable? it points to the window object and not the checkbox checked

Excellent Tutorial as always. Wish I could say I got it first time, but I was no where near. Please could you explain the lastChecked and this values on the checkboxes? I am not sure what set them apart.

How does browser know which element is which when they all have the same content?

I have a doubt, why do we write 'lastChecked=this' at the end of the 'handleCheck' function rather than in the beginning of the function?

Can you explain if there is a reason why to use forEach instead of map?

when you check one, and then another, and then uncheck one of them, hold shift and check one unchecked box. the last box that was unchecked gets checked again. i wanted to look for a solution but my head hurts i don't wanna play anymore.

thank u

just wanna start by saying I'm a huge fan of yours. I took the challange before watching the solution part and turned out I found couple Bug/limitations in your finished code mentioned at bottom here. My solution didn't have those Bugs/limitations. here's what I did : hz-tyfoon.github.io/vanillaJsCheckMultipleCheckboxsByHoldingShiftKey/ here's the couple bug found in your solution: bug-1: if at the very first time a checkbox is checked while holding the shift button, then all the checkboxs from the bottom to that clicked item gets checked. bug-2: In gmail U can both check and also "uncheck" multiple checkbox by holding shift key but, in this code unchecking multiple "checked" item don't work. Again, Thanks a tonn for these videos. You're one of the best frontEnd teachers for me. Felt really excited after I finished this challenge on my own, that's why I shared it by commenting. Thanks again. Love from Bangladesh.

Wow didnt know there was a way to do this without using indexes

Why do we need to put lastChecked = this at last? If we put before if statement - why doesn't it work? Thanks

Nice. First of as you suggested I've implemented on my own. And then watched yours soltion. And I found a bug in this app. For example if you checked first one and after that check input below first one (a few times) (without Shift) - and after you checked AGAIN THIS CHECKBOX but with Shift - it will work out in some strange way. (Hope my poem is understandable).

This is where I struggle the most. I understand the how and why, but as soon as I have to do it myself I struggle alot...

I expected the last one would be unchecked! Why did it work?

Mah boi

it took me alot to get it

what IDE plugin is he using ?

Did anyone solve this on their own?

Why not loop from the first checked index plus one to the second checked index minus one? It would be faster but more importantly better code imo. I try to avoid flags when possible.

What font is it?

Uncaught TypeError: checkboxes.forEach is not a function Here's my code const checkboxes = $('.inbox input[type="checkbox"]'); function handleCheck(e) { console.log(e); } checkboxes.forEach(checkbox => { checkbox.on('click', handleCheck); }); Please explain me the bugg

const checkboxes = document.querySelectorAll('input'); let lastChecked; function handleMultipleChecked({ shiftKey }) { if (shiftKey && this.checked) { if (!lastChecked) lastChecked = -1; const [min, max] = [lastChecked, this.dataset.input].sort((a, b) => a - b); checkboxes.forEach((input, index) => { if (index > min && index < max) { input.checked = true; } }); } else { lastChecked = this.dataset.input; } } checkboxes.forEach((input) => { input.addEventListener('click', handleMultipleChecked); }); took me solid 30 minutes trying to solve it on my own.

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]') checkboxes.forEach(checkBox => { checkBox.addEventListener('click', handleClick) }) let lastChecked function handleClick(e) { let inBetween = false if (e.shiftKey && this.checked && lastChecked) { checkboxes.forEach(checkbox => { if (this === checkbox || lastChecked === checkbox) { inBetween = !inBetween } if (inBetween) { checkbox.checked = true } }) } if (this.checked) { lastChecked = this } else { lastChecked = null } } some bug fixes to your code, It handle case when someone click on a checkbox with shift key and there no previous checked box