Select All Checkboxes With One Checkbox In JavaScript | Code Snippet

3 Mar , 2013  Code Snippets 

Code Snippet #4: The code we wrote today was to enable multiple checkboxes using one single checkbox in JavaScript. Using JavaScript, we will select all checkboxes with one checkbox.Select-All-Checkboxes-Using-One-Checkbox

In one of our pervious code snippet we wrote, we saw how to fetch the values of multiple checkboxes selected. Today, we would like to enrich the checbox again using JavaScript again. This can be thought of as an enhancement for the checbox, which can be mixed with the previous checbox code snippet.

Today’s code we composed was to select all the checkboxes using one single master checkbox. By doing a “Select All” tick, all other checboxes would be selected. Here goes the demo first and then follows the code.

DEMO:[Select the checkbox with label “SELECT ALL THE ABOVE CHECKBOXES”]

HTML:

The above code is the HTML form displayed in the demo. We use try to call a function by name selectAll(this) when the “SELECT ALL THE ABOVE CHECKBOXES” checkbox is enabled. “this” in the above function refers to the current object, hence we pass the obect of the current method calling the function.

JavaScript:

The above code is easy to understand, as it relates to the previous code snippet on checkboxes. Here the “this” object passed from the function call is caught as “all“. We then create a variable by name “checked“, which is given the value “all.checked“. The previous code just means, send the checked stuff to the variable by name “checked“. The rest is managed by getElementByTagName(“input”) and the for look for checking all the other checboxes not checked. This code snippet is quite simple to implement and understand.

Hope this code snippet enlightned you in the checkbox usages. Catch again with more code snippets. Please let us know your findings by commenting below.



, ,

  • Sunil Pachlangia

    Superb…… After a lot of coding i found this is way.
    Thanks a lot….

  • hema

    hi…its very nice its works only when checkbox is used as input type…..will it works when we wanted use this coding with various input types such as text,button etc..but select all/unselect all should only for checkbox

    • Thanks for the query. You can easily declare come names to the checkboxes as and use the function getElementsByName(“some_name”) instead of getElementsByTagName(“input”)
      Hope that helps 🙂