58

I have a loop that creates 20 check-boxes in the same page (it creates different forms). I want via chrome developer tools to run a JavaScript without the use of any library that CHECK all check-boxes at the same time.

This is as far as I got:

function() {
    var aa= document.getElementsByTagName("input");
    for (var i =0; i < aa.length; i++){
     aa.elements[i].checked = checked;
    }
}

PS: I have searched and found a lot of Questions in Stack-Overflow but none worked for me, I'll be glad if someone could find me the correct answer.

1

10 Answers 10

127
(function() {
    var aa= document.getElementsByTagName("input");
    for (var i =0; i < aa.length; i++){
        if (aa[i].type == 'checkbox')
            aa[i].checked = true;
    }
})()

With up to date browsers can use document.querySelectorAll

(function() {
    var aa = document.querySelectorAll("input[type=checkbox]");
    for (var i = 0; i < aa.length; i++){
        aa[i].checked = true;
    }
})()
3
  • 4
    This just saved me having to check a million unsubscribe boxes. Thank you.
    – bhinesley
    Commented Sep 2, 2015 at 23:12
  • 3
    This just got me Udemy certificates in seconds. Thank You Commented May 8, 2020 at 16:45
  • This doesn't work on docs.google.com, maybe because it's made with Angular?
    – 1x2x3x4x
    Commented Dec 29, 2021 at 18:52
20

From Console Dev Tools (F12) you can use query selector as you use in javascript or jQuery code.

'$$' - means select all items. If you use '$' instead you will get only first item.

So in order to select all checkboxes you can do following

$$('input').map(i => i.checked = true)

or

$$('input[type="checkbox"').map(i => i.checked = true)

0
8

To modify the accepted answer slightly, if you're trying to check all of the boxes on some services, such as Loom.com, then you'll need to click each one instead of just setting them to "checked" status, otherwise the functionality doesn't work as expected.

Here's the code to do that:

(function() {
    var aa = document.querySelectorAll("input[type=checkbox]");
    for (var i = 0; i < aa.length; i++){
        aa[i].click();
    }
})()

Please note that longer lists of checkboxes will cause the page to pause temporarily as all checkboxes get automatically clicked for you.

2
  • 1
    Your suggestion is the .click() feature right? Amazing I needed this in the past. Commented Aug 6, 2020 at 17:00
  • That's awesome, everyone needs to know basic difference between checked and click Commented Nov 23, 2020 at 11:17
3

You have it nearly correct. Just use

aa[i].checked = "checked";

inside the loop.

Namely, you need to make sure that:

  1. "checked" is a string, not a variable identifier, and
  2. you index directly on aa, not aa.elements, which does not exist
0
3

Or, we could use this one line statement:

document.querySelectorAll("input[type=checkbox]").forEach(element => element.checked = true);
2

If you're here for the quick one-liner:

var aa = document.getElementsByTagName("input"); for (var i = 0; i < aa.length; i++) aa[i].checked = true;
3
  • 1
    This wasn't working for me. Adapted to the following, which does work: var aa = document.querySelectorAll('input[type=checkbox]'); for (var i = 0; i < aa.length; i++) aa[i].checked = true;
    – Tom
    Commented Mar 12, 2015 at 14:58
  • @Tom Thanks! I skipped caring about only checkboxes but that could be put back in (the if statement from the main answer). I wonder what wasn't working for you... your solution might not help me on ancient IE versions. quirksmode.org/dom/core/#t12
    – user423430
    Commented Mar 16, 2015 at 20:27
  • @Tom FYI, I checked in again and it seems to be fine. jsfiddle.net/r7jnxta2
    – user423430
    Commented Nov 23, 2015 at 5:21
2

You can do this in a one-liner without creating and calling an anonymous function. Use querySelectorAll to find the checkboxes, then loop through them with for..of.

Pasting the following line into the developer tools console achieves the desired result, assuming all the checkboxes are input tags with type=checkbox.

for (cb of document.querySelectorAll("input[type=checkbox]")) {cb.checked=true;}
1

Try this :)

(function () {
    var checkboxes = document.querySelectorAll('input[type=checkbox]');

    //convert nodelist to array
    checkboxes = Array.prototype.slice.call(checkboxes);
    checkboxes.forEach(function (checkbox) {
        console.log(checkbox);
        checkbox.setAttribute('checked', true);
    });

})()

http://jsfiddle.net/YxUHw/

1
  • You don't need to convert the nodelist to an array just call forEach the same way you called slice ` Array.prototype.forEach.call(checkboxes,function (checkbox) { ` jsfiddle.net/YxUHw/17
    – Musa
    Commented Oct 10, 2013 at 15:56
1

Javascript function to toggle (check/uncheck) all checkbox.

function checkAll(bx)
{
 var cbs = document.getElementsByTagName('input');
 for(var i=0; i < cbs.length; i++)
 {
    if(cbs[i].type == 'checkbox')
    {
        cbs[i].checked = bx.checked;
     }
 }
}

If you want to it from developer tools then remove parameter of function and put the value as "true" or "false" instead of "bx.checked"

0

Try setAttribute.

(function() {
  var aa = document.getElementsByTagName("input");
  for (var i =0; i < aa.length; i++){
    aa.elements[i].setAttribute('checked', 'checked');
  }
})();

Edit: added parens to execute the function immediately.

1
  • The code in your question creates a function: "function(){...}". It doesn't actually call the function though, that's why none of the answers provided here work for you. We all assumed you wanted help with the internals of the function, not how to run it. I've added parentheses to my solution so that it'll actually invoke the function immediately.
    – jimbo
    Commented Jan 10, 2013 at 4:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.