Mark or unmark all the checkboxes of a form with Javascript

We make a Javascript function so that all the checkboxes or selection boxes of a form can be selected at the same time, by clicking on a single link. We also do the function to deselect all the elements at once.

The exercise that we are going to carry out in this article is quite typical of working with forms in Javascript. It is about making a link or a button so that all the checkbox fields that are in a form can be marked at once, that is, without having to click on them one by one to mark them all. We will also make the function that allows to uncheck all the checkbox fields of the form at once.

The exercise is simple to understand, and we will have seen similar things in many pages and websites. We are going to do it with a very simple Javascript, using various approaches.

The HTML form with its checkboxes

We have a form created with HTML that is where the checkboxes that must be checked and unchecked automatically will be. The form is very simple. We see it below.

The only thing to note is that we have placed various types of elements on the form. Actually, we are only going to work with the state of the checkboxes, but we have included other elements because the usual thing in a form is that there are elements of various types.

At the end of the form we have a couple of links to check or uncheck all the checkboxes at once. These links call a couple of Javascript functions that we’ll look at now. Of course, you could use buttons or any other element instead of links.

Mark all checkbox elements with Javascript

Now we are going to see some Javascript functions that will allow us to mark all the checkbox elements that are in a form. We will see it with two different approaches, using a more traditional Javascript code and a slightly more modern code.

function selectAll() { for (let i=0; i < document.f1.elements.length; i++) { if(document.f1.elements.type === "checkbox") { document.f1.elements.checked = true; } } }

This first example is a bit more traditional. Use a simple for loop and iterate through all the elements of the form, both the checkboxes and the other elements.

• To access the form, start from the “document” object and access the form through its name, defined in the “name” attribute, in this case document.f1.
• To go through all the fields of the form, the elements array is used, which saves a reference to each element that is inside the form.
• In the loop, it checks if the current element is of type “checkbox” (remember that the elements array contains all the elements, but we only want to operate with those that are checkboxes) and in that case, the “checked” attribute is simply updated to the value true, so the checkbox will be checked.

Now we are going to see another perfectly valid alternative of Javascript code to do the same, but using slightly more modern features of the language.

function checkAll() { document.querySelectorAll(‘#formElement input’).forEach(function(checkElement) { checkElement.checked = true; }); }

The approach we have used this time is a little different, leaving a slightly more compact code. In this case we have not accessed all the form fields, but we have gone through only those that are truly checkboxes, so we have saved the “`if“`. Also, thanks to “`forEach“` we save defining the “`for“`.

• To access the form, we start from the form identifier, called “formElement”.
• We use querySelectorAll() which is a method of the document object that receives a CSS selector. This method returns all page elements that match the provided selector.
• The selector we have used is ‘#formElement input’ This selector starts from the form whose identifier is #formElement and within that form looks for input elements whose type attribute is checkbox.
• We traverse the array of elements provided by querySelectorAll with the forEach method of the arrays.
• For each checkbox element, its checked property is finally activated.

Function to uncheck all checkboxes

Now we are going to see the functions that perform the opposite operation, in this case unmarking or deactivating the checkboxes of the form. The approaches in both functions are identical to the ones we have used in the previous examples.

With a more traditional Javascript we could do something like this.

function uncheckAll() { for (let i=0; i The unselect_all() function is almost the same as above. It performs a tour of all the elements and in the case that they are checkboxes, the “checked” attribute is set to zero so that the selection box remains unchecked.

Now let’s look at an alternative with the latest Javascript.

function uncheckAll() { document.querySelectorAll(‘#formElement input’).forEach(function(checkElement) { checkElement.checked = false; }); }

We again make use of “`querySelectorAll“`, which is especially convenient for selecting elements that are truly checkboxes.

conclusion

The example has no more mystery. We have seen how to make this route to the elements of the form, detecting which of them are checkboxes, to mark or unmark them conveniently. Then we have seen a counterpart that uses more modern Javascript functions for advanced element selection and traversal with a “`forEach“` loop, which is also perfectly valid.

Both functions are equally valid. For the example to run correctly you have to make sure that the form has the specific “name” or “id” that we have used to access it. In case there is any doubt, we are going to leave the complete code of this example below.