Creating a tri-state checkbox using JavaScript

The basic feature of a checkbox is to have two states: checked or unchecked. However, there are situations when we cannot decide the state of the checkbox. For example, if we have a list of checkboxes and one global checkbox for all these checkboxes in the list, and if all checkboxes in the list are checked, then global checkbox is also checked. If all checkboxes are unchecked, the global one is unchecked too. But what if some checkboxes are checked and some of them are unchecked? In that case, we set the global checkbox to an indeterminate state. As shown in the following screenshot, it's visually displayed as a filled square in the checkbox in the Chrome web browser. Unfortunately, it cannot be done through HTML. There are two possibilities: either create a custom icon for this state and then set the CSS style or set this state by calling JavaScript. The second option is better because it allows us to show an element natively using the web...