Sometimes, we want to add a tri-state check box in HTML and JavaScript.
In this article, we’ll look at how to add a tri-state check box in HTML and JavaScript.
How to add a tri-state check box in HTML and JavaScript?
To add a tri-state check box in HTML and JavaScript, we set the indetermine
property.
For instance, we write
<form>
<div><input type="checkbox" checked="checked" />True</div>
<div><input type="checkbox" />False</div>
<div><input type="checkbox" class="indeterminate" />Indeterminate</div>
</form>
to add a form with some checkboxes.
Then we write
const indeterminates = document.getElementsByClassName("indeterminate");
indeterminates["0"].indeterminate = true;
to select the checkbox with class indeterminate
with getElementsByClassName
.
We get the first one and set its indeterminate
property to true
to set it to the indeterminate state.
Conclusion
To add a tri-state check box in HTML and JavaScript, we set the indetermine
property.