Check All - Uncheck all checkboxes in AlpineJS

Documentation

We have a Select All checkbox, clicking on which we want to check/uncheck the other checkboxes.

On clicking on the Select All checkbox, we call the toggleAllCheckboxes method, which toggles the selectAll property. We then get all the other checkbox elements in javascript using query selector and apply the boolean value to the checked attribute.

Since it does not automatically adds or removes the values into the property to which checkboxes are model bound. We have done that manually in the same method itself.