Check all Checkboxes in Page via Developer Tools

JavascriptGoogle ChromeCheckboxGoogle Chrome-Devtools

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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)

Solution 3 - Javascript

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.

Solution 4 - Javascript

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

Solution 5 - Javascript

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;

Solution 6 - Javascript

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/

Solution 7 - Javascript

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"

Solution 8 - Javascript

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

Solution 9 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIgnacio CorreiaView Question on Stackoverflow
Solution 1 - JavascriptMusaView Answer on Stackoverflow
Solution 2 - JavascriptVlad BezdenView Answer on Stackoverflow
Solution 3 - JavascriptRick Mac GillisView Answer on Stackoverflow
Solution 4 - JavascriptapsillersView Answer on Stackoverflow
Solution 5 - Javascriptuser423430View Answer on Stackoverflow
Solution 6 - JavascriptRobin DrexlerView Answer on Stackoverflow
Solution 7 - JavascriptPrem Kumar MauryaView Answer on Stackoverflow
Solution 8 - JavascriptscignView Answer on Stackoverflow
Solution 9 - JavascriptjimboView Answer on Stackoverflow