Skip to content

Check all HTML 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, with one small tweak: 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 vanilla Javascript code above, the logic is just abstracted by jQuery.

Hopefully this will save you some time with checkboxes in the future! Happy checking and un-checking!

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. Tadej October 5, 2015

    Thanks. That was super-helpful!

  2. Peter Wise March 23, 2016

    .prop doesn’t work on some jquery versions. Try:
    $(“:checkbox”).attr(“checked”, “checked”);

  3. Alan May 26, 2016

    It kind of worked for me, but when I tried submitting to make the changes (in this case deleting a bunch of cities from a list), it came back with the following:

    Server Error in ‘/’ Application.

    Operation is not valid due to the current state of the object.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.InvalidOperationException: Operation is not valid due to the current state of the object.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [InvalidOperationException: Operation is not valid due to the current state of the object.]
    System.Web.HttpValueCollection.ThrowIfMaxHttpCollectionKeysExceeded() +4198079
    System.Web.HttpValueCollection.FillFromEncodedBytes(Byte[] bytes, Encoding encoding) +60
    System.Web.HttpRequest.FillInFormCollection() +189

    [HttpException (0x80004005): The URL-encoded form data is not valid.]
    System.Web.HttpRequest.FillInFormCollection() +11196408
    System.Web.HttpRequest.get_Form() +119
    System.Web.HttpRequest.get_HasForm() +11189223
    System.Web.UI.Page.GetCollectionBasedOnMethod(Boolean dontReturnNull) +124
    System.Web.UI.Page.DeterminePostBackMode() +83
    System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +270

    Version Information: Microsoft .NET Framework Version:2.0.50727.5485; ASP.NET Version:2.0.50727.5491

    • Nathan Giesbrecht May 27, 2016

      That’s appears to be server-side code. Was there more than 1000 checkboxes selected? It appears that Microsoft’s software won’t allow you to submit more than 1000 form variables in any single given request.

      If you’re using the jQuery method, you could try appending :lth(950) to the selector (the bit in double-quotes, ie. $(“input[type=’checkbox’]:lt(950)”)).

      If you’re using the pure Javascript method, you could try limiting the loop to the first 950 items. Ie:

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

      The reason for using 950 instead of 1000, is that the form is likely to have other variables being submitted also. So reducing that number slightly should allow for those and keep the total number of variables under 1000.

      Good luck!

Trackbacks

There are no trackbacks on this entry.

Add a Comment

Required

Required

Optional


framework-break