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 ticked?

Perhaps a JavaScript or Chrome Console window, anything?

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

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 3

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.

Answer 4

by using jquery , simple as that

$('input:checkbox').each(function () {
   // alert(this);
   $(this).attr('checked', true);
  });

Or simply use

$('input:checkbox').prop('checked', true);// use the property

OR

 $('input:checkbox').attr('checked', true); // by using the attribute

Answer 5

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 6

Multiple Check All & Uncheck All Boxes

All You Need to change is the tag 'name' to change the what its turing ON/OFF

<FORM>
    <input type="checkbox" name="item0[]" onclick="CheckAll(this)" />
    <input type="checkbox" name="item0[]" value="1" />
    <input type="checkbox" name="item0[]" value="2" />
    <input type="checkbox" name="item0[]" value="3" />
    <br>
    <input type="checkbox" name="item1[]" onclick="CheckAll(this)" />
    <input type="checkbox" name="item1[]" value="a" />
    <input type="checkbox" name="item1[]" value="b" />
    <input type="checkbox" name="item1[]" value="c" />
    <br>
    <input type="checkbox" name="item2" onclick="CheckAll(this)" />
    <input type="checkbox" name="item2" value="a1" />
    <input type="checkbox" name="item2" value="b2" />
    <input type="checkbox" name="item2" value="bc" />
</FORM>

<script>
    function CheckAll(x)
    {
        var allInputs = document.getElementsByName(x.name);
        for (var i = 0, max = allInputs.length; i < max; i++) 
        {
            if (allInputs[i].type == 'checkbox')
            if (x.checked == true)
                allInputs[i].checked = true;
            else
                allInputs[i].checked = false;
        }
    }
</script>

Answer 7

I provided answer to this question at Check all Checkboxes in Page via Developer Tools

In short you can do it from dev tools console (F12) by:

$$('input').map(i => i.checked = true)

or

$$('input[type="checkbox"').map(i => i.checked = true)

Answer 8

Since chrome 30+ it's also possible to click in the first result and then shift+click the last result.

In recent version of chrome they have changed the checkbox input type to a custom tag cr-checkbox, therefore the type of checkboxes aren't input anymore.

Answer 9

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 10

  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).