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?

@FabrícioMatté - I am unaware of what it is ? Could you please explain ? — Yahoo
– Yahoo, Commented Jun 6, 2012 at 4:38
7 answers.. as I expected, there's enough explanations here :P Anyway, I submitted my own answer with detailed explanation/instructions. — Fabrício Matté
– Fabrício Matté, Commented Jun 6, 2012 at 4:52
Most probably it is for the field level permissions in salesforce. — Dadhich Sourav
– Dadhich Sourav, Commented Nov 18, 2019 at 11:47

Adam Rackis · Accepted Answer · 2012-06-06 04:58:48Z

64

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

edited Jun 6, 2012 at 4:58

answered Jun 6, 2012 at 4:44

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fabrício Matté Over a year ago

$(':checkbox') is a handy shorthand for $("[type='checkbox']") as well.

Adam Rackis Over a year ago

@Derek- you're right - that's why I gave the pure JS answer first :)

ADTC Over a year ago

Use crunchinator to convert the code above to a bookmarklet (unfortunately the 'let doesn't work with frames, fortunately Firefox can "Show only this frame"): Bookmarklet Crunchinator

Matt Friedman Over a year ago

You can use javascript: <code> and jam it into the address bar and hit return and it works perfectly!

mallorca Over a year ago

It works, I used to uncheck 1000 checkboxes at once, changing to false allInputs[i].checked = false; Thanksss!

Loktar · Accepted Answer · 2012-06-06 04:52:58Z

18

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.

edited Jun 6, 2012 at 4:52

answered Jun 6, 2012 at 4:42

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

5 Comments

Zeta Over a year ago

+1: Notes: Used functions: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…, developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…. Compatibility notice: forEach isn't implemented until version 9 in IE, document.querySelectorAll was implemented in version 8.

Loktar Over a year ago

@Zeta yeah wont work in IE<8, but I chose forEach because he mentioned the chrome console, so I assume hes using a modern browser.

Talha Over a year ago

@Loktar: strange to read 'don't use jQuery.. its just silly for something so trivial.' isn't it?

Loktar Over a year ago

@Talha not sure what you mean? But jQuery is crazy overkill for something like this. No need to include 2000 lines of code to check some check boxes.

PeterCo Over a year ago

@Loktar How can I check only one specific checkbox from a selection of many? The code line looks like <input class="type" type="checkbox" data-bind="checked: checked, value: id" value="1"> (there are many more checkboxes with higher values from 2 to 13.)

Derek 朕會功夫 · Accepted Answer · 2012-06-06 04:43:16Z

7

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.

answered Jun 6, 2012 at 4:43

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Comments

Talha · Accepted Answer · 2012-06-06 04:57:41Z

5

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

edited Jun 6, 2012 at 4:57

answered Jun 6, 2012 at 4:51

Talha

19.3k8 gold badges53 silver badges66 bronze badges

1 Comment

Alan Baljeu Over a year ago

I find using Chrome console, .prop('checked', true) visibly turns on the checkbox. .attr('checked', true) does not. I don't understand, as .attr is much more often suggested but it doesn't work.

Moritz Ringler · Accepted Answer · 2023-05-09 12:20:35Z

5

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

edited May 9, 2023 at 12:20

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

answered Jul 15, 2020 at 9:40

Vuk Vukovic

1181 silver badge7 bronze badges

Comments

Fabrício Matté · Accepted Answer · 2012-06-06 04:47:14Z

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. =]

answered Jun 6, 2012 at 4:47

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

Moritz Ringler · Accepted Answer · 2023-05-09 12:21:17Z

2

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)

edited May 9, 2023 at 12:21

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

answered Apr 18, 2017 at 21:05

Vlad Bezden

90.7k27 gold badges261 silver badges190 bronze badges

1 Comment

Vinicius Over a year ago

The best answer, but I had to use the click method to make this work: $$('input[type="checkbox"]').forEach(i => { if (!i.checked) i.click() } )

Moritz Ringler · Accepted Answer · 2023-05-09 12:22:18Z

0

The following code will toggle all checkboxes. I think this is useful in case you want that feature. If you check a box it will uncheck that box. I know this doesn't answer the question technically but I wanted to put it up here because it's what I use. Thanks for the comment. I hope this answer is better suited to your pallette.

//Select All Checkboxes On Page
allSelects = document.querySelectorAll('input[type="checkbox"]');
for(i=0;i<allSelects.length;i++){
  allSelects[i].click();
}

edited May 9, 2023 at 12:22

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

answered Oct 20, 2022 at 16:48

Kirby One

115 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Amritpal Singh · Accepted Answer · 2012-06-06 04:45:33Z

-1

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

answered Jun 6, 2012 at 4:45

Amritpal Singh

1,7851 gold badge13 silver badges20 bronze badges

2 Comments

Dadhich Sourav Over a year ago

We want this to be done using console tab of any browser not using any button call.

Amritpal Singh Over a year ago

@DadhichSourav, As per the stated question there is "or" in your query. Which means any way to do it (Anything).

Collectives™ on Stack Overflow

Select All checkbox by Javascript or console

10 Answers 10

5 Comments

5 Comments

Comments

1 Comment

Comments

Comments

Multiple Check All & Uncheck All Boxes

Comments

1 Comment

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

5 Comments

Comments

1 Comment

Comments

Comments

Multiple Check All & Uncheck All Boxes

Comments

1 Comment

1 Comment

2 Comments

Linked

Related