Check all Checkboxes in Page via Developer Tools
JavascriptGoogle ChromeCheckboxGoogle Chrome-DevtoolsJavascript 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:
"checked"
is a string, not a variable identifier, and- you index directly on
aa
, notaa.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);
});
})()
Solution 7 - Javascript
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; } } } Javascript function to toggle (check/uncheck) all checkbox.
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.