Check all Checkboxes in Page via Developer Tools

Question

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.

Answer 1

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)

Answer 2

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.

Answer 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

Answer 4

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;

Answer 5

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/

Answer 6

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"

Answer 7

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;}

Answer 8

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.