Toggle/switch that unselects all ticked checkboxes in list

Is there a way in css where I can have a checkbox or toggle that I could select/unselect that would untick or tick all other checkboxes in a list that are below it?

I can see this being useful when you have a grocery list that gets used over and over each week and you keep this list for each shopping time where you tick off all recurring items you have/need. When you are done your purchase, you can toggle/check this box at the top of the list and all checkboxes would be unticked so you can use this recurring list again for the next shopping time.

3 Likes