Create Dynamic Checkbox Using Drop Down Selection With jQuery | Code Snippet #17

Dynamic-Check-Boxes-Using-Drop-Down-jQueryCode Snippet #16: The code we discovered today is used to create dynamic checkbox using jQuery with the help of drop down selection. Dynamically generating checkbox based on a drop down selection.

In our previous code snippet, we saw how to change drop downs based on another drop down selection. Today, we are going to see with the change of drop down, how a checkbox can be generated dynamically with the help of jQuery.

You may also be interested in these code snippets on drop downs:

We will be using switch case statements to generate the checkbox based on drop down selection.

Check the demo below(Change the drop down to generate checkboxes)




We add three options in the drop down. There is a checkbox div element, which is not visible initially.

In the jQuery script, we create a switch statement, where we store the values of the checkboxes to be displayed. If the switch case is one, then we display LG, if the switch case is two then Samsung is displayed. The switch case values are passed to the jQuery script from the drop downs.

We have referenced the checkbox div to the output variable as shown below:

Now, we need to wait for the change event to occur. Once the change event occurs on the drop down, then the following code gets initiated:

When the change event on drop down occurs, the div is initially emptied out, and the new result from the array/switch case is shown as checkboxes on the webpage. In this code snippet, we have learnt how to create dynamic checkbox using jQuery with the help of drop down selections.

Hope you enjoyed the code snippet. Stay tuned for more code snippets. If you have any doubts, please let us know by commenting.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...

1 Response

  1. which browser are you using? if it is IE, please try it in Chrome?