Dynamically Create Checkboxes based on Textbox Values using JavaScript

Dynamically Create Checkboxes based on Textbox Values using JavaScript

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

Output


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

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.

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.

Previous - How to Create a Simple CRUD Application using only JavaScriptNext - Remove Duplicates in a JavaScript Array using ES6 Set and from() Function



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!