Check all Checkboxes in Page via Developer Tools

问题

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:

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

回答2:

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)

回答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

回答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;

回答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/

回答6:

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.

回答7:

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"

来源：https://stackoverflow.com/questions/14245769/check-all-checkboxes-in-page-via-developer-tools