Skip to content

Check all checkboxes with Google Chrome or Firefox and Javascript

Posted by Nathan Giesbrecht on February 22, 2013 in Snippets, Tips, Web Development

Google Chrome LogoEvery once in a while you’ll come across a website or webpage with a whole lot of HTML checkboxes, and you want to check them all. This is a common situation to come across as a web developer also. However, if there are a lot of checkboxes this process becomes time consuming, especially if you’re doing it repeatedly while developing something. With Google Chrome’s console (or Firefox) and a bit of Javascript it becomes a breeze.

Opening up the Google Chrome Console

The first thing you’ll need to do is to open the browser Console. In Google Chrome this can be achieved by hitting CTRL+SHIFT+J, or CTRL+SHIFT+K in Firefox. You should be presented with a screen that may have some errors or warnings at the top (depending on the website), and a prompt at the bottom. This console allows us to “inject” Javascript directly. This is a really handy tool for testing Javascript and AJAX operations.

With pure Javascript

In the console prompt simply enter the following code (Note: to enter code on the next line in Chrome, use Shift+Enter – Just pressing enter will execute the current line of code)

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

Hit enter to execute the above code, and voila! All of the checkboxes on the page are now checked.

The first line of code selects all the input tags on the page. It then enters a loop for each of those input's, check's if that particular input is of type "checkbox", and sets the "checked" property to true if it is. The same code can be used to uncheck all checkboxes, simply replace "getInputs[i].checked = true;" with "getInputs[i].checked = false;"

With jQuery

The code above becomes simpler if you know the page you're on has the jQuery Javascript library included with it. The above code can be simplified to:

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

To clean it up even more, you can use the “:checkbox” pseudo-selector

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

Both snippets of code achieve the same result as the pure Javascript code above, the logic is just abstracted by jQuery.

Hopefully this will save you some time with checkboxes in the future!

About the Author

Nathan Giesbrecht is a web design and web development professional. Nathan likes Wordpress, the Winnipeg Jets, green tea, hot dogs and golf.

Spread The Love, Share Our Article

  • Delicious
  • Digg
  • Newsvine
  • RSS
  • StumbleUpon
  • Technorati
  • Twitter

Related Posts

Comments

  1. synonyms vocabulary workshop July 27, 2013

    Magnificent web site. Plenty of helpful information here.

    I am sending it to some friends ans also sharing in delicious.
    And obviously, thanks in your sweat!

Trackbacks

There are no trackbacks on this entry.

Add a Comment

Required

Required

Optional


framework-break