How to check/uncheck all checkboxes on a web page using vanilla Javascript

A couple of years ago I wrote this short post about checking/selecting all checkboxes on a web page using jQuery. However, how would we do that if we can’t included jQuery on the page or if we want to do it only with Javascript!

To uncheck all checked checkboxes on a web page using only Javascript:

document.querySelectorAll("input[type='checkbox']:checked").forEach((element) => {
element.click();});

To make all unchcked checkboxes on a web page checked:

document.querySelectorAll("input[type='checkbox']").forEach((element) => {
element.click();});

You may think why I do write about this now? Let me be honest with you about this. Not only this post, but everything I have posted on this blog is/was either a problem I have encountered or a problem of someone else who reached out to me for help. Hence the reason behind this post is the fact that I wanted to uncheck all interests on my twitter profile. If you have a twitter account you may want to go to this url (if you are logged in) https://twitter.com/settings/your_twitter_data/twitter_interests and check all the interests you have :D.

Twitter thinks that you are interested in those topics based on your online activity on Twitter and outside twitter. If you want to know more about this, just read the following article about the change and how and when it was introduced by Twitter. Twitter has a list of things it thinks you’re interested in — here’s how to see it

To be honest, I was quite surprised by the amount of interests Twitter thinks I have.  Although everything single interest was correct and Twitter has done a quite impressive job in its prediction process on what I might be interested in, I wasn’t able to count them since the list was too long, I counted them using the following Javascript code:

var counter = 0;
document.querySelectorAll("input[type='checkbox']").forEach((element) => {
counter+=1; });
console.log(counter);

I had 189 interests (LOL). Erdogan, Putin, cats and Lex Fridman were among those interests ¯\_(ツ)_/¯

When I first tried to run the Javascript code in Chrome console, the code has unchecked a couple of checkboxes, but I stopped doing that and it started displaying a lot of errors in the console:
main.167613d5.js:1 POST https://twitter.com/i/api/1.1/account/personalization/p13n_preferences.json 503

In addition to that, Twitter started displaying an error message Twitter is over capacity. Please wait a few moments then try again.. Then I realized I may need a timer to do the unchecking sequentially instead of doing it at the same time. I have ended up editing the code and adding a timeout function. The final code is something like this :

var timer=10;
document.querySelectorAll("input[type='checkbox']:checked").forEach((element) => {
setTimeout(function(){element.click()},timer);timer+=500;});

I must admit, the errors didn’t go away, I kept getting those 503 errors, but the script did what it has to do by automatically unchecking all those 189 checkboxes 🙂