How to add a tri-state check box in HTML and JavaScript?

Spread the love

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.

Leave a Reply

Your email address will not be published.