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

Answer 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/

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

Answer 3

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 4

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.

Answer 5

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 6

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)