How to Add Checkboxes

How to Add Checkboxes Inside Select Options with JavaScript

Sometimes, we want to add checkboxes inside select options with JavaScript.

In this article, we’ll look at how to add checkboxes inside select options with JavaScript.

Add Checkboxes Inside Select Options with JavaScript

To add checkboxes inside select options with JavaScript, we can wrap our select drop down in a div and then add a div below the select element to show the drop-down choices.

For instance, we can write the following HTML:We add the select element with the div with ID checkboxes with the choices.

The input with type checkbox are the checkboxes.

Then we can add the following CSS to make the choices look like they’re part of the drop-down:

.multiselect {To do that, we div with ID overSelect absolute.

And we make the div with ID selectBox have relative position.

Also, we make the div with ID checkboxes hidden by setting the display property to none .

Finally, we add the following JavaScript code to toggle the div with ID checkboxes on and off:

Click