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?

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

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

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

Solution 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

Solution 5

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>

View more solutions

Comments

[Zeta]

+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]

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

[Fabrício Matté]

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

[Talha]

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

[Loktar]

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

[Adam Rackis]

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

[ADTC]

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

[PeterCo]

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

[Matt Friedman]

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

[Dadhich Sourav]

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

[Amritpal Singh]

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

[Alan Baljeu]

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.