Select All checkbox by Javascript or console

Question

I am having 100 Checkboxes on my web page. For testing purposes I want to tick all those boxes, but manually clicking is time consuming. Is there a possible way to get them tick

Answer 1

The most direct way would be to grab all your inputs, filter just the checkboxes out, and set the checked property.

var allInputs = document.getElementsByTagName("input");
for (var i = 0, max = allInputs.length; i < max; i++){
    if (allInputs[i].type === 'checkbox')
        allInputs[i].checked = true;
}

---

If you happen to be using jQuery—and I'm not saying you should start just to tick all your checkboxes for testing—you could simply do

$("input[type='checkbox']").prop("checked", true);

or as Fabricio points out:

$(":checkbox").prop("checked", true);

Answer 2

This JS code will check all checkboxed in your page:

var a = document.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<a.length; i++)
    a[i].checked = true;​

Live demo

All you have to do then is create a bookmarklet with it, say, with this bookmarklet maker, which generates this bookmarklet code:

javascript:var a=document.querySelectorAll('input[type="checkbox"]');for(var i=0;i<a.length;i++)a[i].checked=true;%E2%80%8B

Just add this URI to a bookmark in your bookmark toolbar, then all you have to do is click it whenever you need all the checkboxes in your page to be checked. =]

Answer 3

Pure JS method, don't use jQuery.. its just silly for something so trivial.

[].forEach.call( document.querySelectorAll('input[type="checkbox"]'),function(el){
       el.checked=true;
     }
);​

Live Demo

To use it on any webpage you can paste this into the address bar

javascript:[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){el.checked=true});

then drag that to your bookmarks, and you have a bookmarklet. Just click it whenever you need to use it on a page.

Answer 4

Just paste one of these one-liners to your browser console:

Tick all checkboxes:

document.querySelectorAll('input[type="checkbox"]').forEach(e => e.checked = true);

Untick all checkboxes:

document.querySelectorAll('input[type="checkbox"]').forEach(e => e.checked = false);

Answer 5

  function selectAll(elem)
  {
  for (i = 0; i < elem.length; i++)
    elem[i].checked = true ;
  }

On Click of a button call this method and pass the name of the element(checkboxes-they all should be same named).

Answer 6

querySelectorAll is your best choice here if you don't want jQuery!

var ele = document.querySelectorAll("input[type=checkbox]");
for(var i=0;i<ele.length;i++){
    ele[i].checked = true;
}
//Done.