Dynamically Create Checkboxes based on Textbox Values using JavaScript

javascript

← PrevNext →

Tools you can use

You can create checkboxes dynamically in JavaScript using the document.createElement() method. The method takes a parameter in the form of a tagName. I created a scenario, where I’ll create the checkboxes in JavaScript based on inputs from a textbox.

Here’s how you add a group of textboxes on your form at design time.

<html>
<head>
    <title>Add Checkboxes</title>
</head>
<body>
    <input type="checkbox" id="pencil" value="pencil" name="products" />
    <label for="pencil">pencil</label>
    <br />
    <input type="checkbox" id="eraser" value="eraser" name=" products" />
    <label for="eraser">eraser</label>
</body>
</html>
Try it

👇 You will get a result like this...


Now read: How to check if Checkbox is Checked or not using only JavaScript

Create Checkboxes Dynamically

Now let’s make a similar form with dynamically created checkboxes using values from a textbox. The textbox will provide values for the checkboxes and its labels. Therefore, I also need to create labels dynamically in my script.

The Markup and Script

I have two input boxes of type text and button. Clicking the button will call a function named createChk(), with a parameter (the textbox id).

<html>
<head>
    <title>Add Checkbox Dynamically using JavaScript</title>
</head>

<body>
    Enter a Value <input type="text" id="prod" autofocus />
    <p>
        <input type="button" id="bt" value="Create Checkbox" onclick="createChk(prod)" />
    </p>

    <p id="container"></p>
</body>

<script>
    var i = 1;      // COUNTER, FOR CHECKBOX ID.

    function createChk(obj) {
        if (obj.value !== '') {

            var chk = document.createElement('input');  // CREATE CHECK BOX.
            chk.setAttribute('type', 'checkbox');       // SPECIFY THE TYPE OF ELEMENT.
            chk.setAttribute('id', 'prodName' + i);     // SET UNIQUE ID.
            chk.setAttribute('value', obj.value);
            chk.setAttribute('name', 'products');

            var lbl = document.createElement('label');  // CREATE LABEL.
            lbl.setAttribute('for', 'prodName' + i);

            // CREATE A TEXT NODE AND APPEND IT TO THE LABEL.
            lbl.appendChild(document.createTextNode(obj.value));

            // APPEND THE NEWLY CREATED CHECKBOX AND LABEL TO THE <p> ELEMENT.
            container.appendChild(chk);
            container.appendChild(lbl);

            obj.value = '';
            document.getElementById(obj.id).focus();

            i = i + 1;
        }
    }
</script>
</html>
Try it

👉 How to add checkbox to a Table cell using plain JavaScript
Add checkbox to table cell in JavaScript

The function createChk() takes a parameter as the object. Clicking the button on form will call this function with a parameter, which is the textbox. Using the object reference, I can extract the value and other properties.

👉 This example is also useful... How to check if checkbox is checked or not using only JavaScript
Check if checkbox is checkded in JavaScript

I am also creating a label each to display the checkbox name. Without the label, you’ll only see a square box. To add the name to the label, I am using document.createTextNode() method to create a text node and appending it as a child to the label.

lbl.appendChild(document.createTextNode(obj.value));

However, you can also use the innerHTML property to assign value to the label.

lbl.innerHTML = obj.value;

That’s it. Thanks for reading. ☺

← PreviousNext →