Dynamically create a checkbox with JavaScript/jQuery

This post will discuss how to create a dynamic checkbox using JavaScript and jQuery.

To create a checkbox dynamically, you would need to create the checkbox, its label, and optionally a <br> tag.

1. Using JavaScript

In pure JavaScript, you can use the document.createElement() method to programmatically create a checkbox element.

The following example creates a new checkbox with necessary attributes and appends it to a container using the Node.appendChild() method.

JS

document.getElementById('submit').onclick = function() {

var checkbox = document.createElement('input');

checkbox.type = 'checkbox';

checkbox.id = 'car';

checkbox.name = 'interest';

checkbox.value = 'car';

var label = document.createElement('label')

label.htmlFor = 'car';

label.appendChild(document.createTextNode('Car'));

var br = document.createElement('br');

var container = document.getElementById('container');

container.appendChild(checkbox);

container.appendChild(label);

container.appendChild(br);

}

HTML

<!doctype html>

<html>

<body>

<div>

<button id="submit">Create Checkbox</button>

</div>

</body>

</html>

CSS

label {

font: 15px 'Exo 2', sans-serif;

}

input {

margin: 6px;

}

button {

margin-top: 10px;

padding: 2 2;

font: 15px 'Exo 2', sans-serif;

}

Edit in JSFiddle

2. Using jQuery

With jQuery, you can set checkbox attributes using the .prop() method and .append() method to append the checkbox at the end of a container. This is demonstrated below:

JS

$(document).ready(function() {

$('#submit').click(function() {

$('#container').append(

$(document.createElement('input')).prop({

id: 'myCheckBox',

name: 'interest',

value: 'car',

type: 'checkbox'

})

).append(

$(document.createElement('label')).prop({

for: 'myCheckBox'

}).html('Car')

).append(document.createElement('br'));

})

});

HTML

<!doctype html>

<html>

<body>

<div>

<button id="submit">Create Checkbox</button>

</div>

</body>

</html>

CSS

label {

font: 15px 'Exo 2', sans-serif;

}

input {

margin: 6px;

}

button {

margin-top: 10px;

padding: 2 2;

font: 15px 'Exo 2', sans-serif;

}

Edit in JSFiddle

Alternatively, here’s a shorter version:

JS

$(document).ready(function() {

$('#submit').click(function() {

$('#container')

.append('<input type="checkbox" id="car" name="interest" value="car">')

.append('<label for="car">Car</label></div>')

.append(`<br>`);

})

});

HTML

<!doctype html>

<html>

<body>

<div>

<button id="submit">Create Checkbox</button>

</div>

</body>

</html>

CSS

label {

font: 15px 'Exo 2', sans-serif;

}

input {

margin: 6px;

}

button {

margin-top: 10px;

padding: 2 2;

font: 15px 'Exo 2', sans-serif;

}

Edit in JSFiddle

To create multiple checkboxes dynamically, you can do something like:

JS

$(document).ready(function() {

$('#submit').click(function() {

var list = ['Car', 'Bike', 'Scooter'];

for (var value of list) {

$('#container')

.append(`<input type="checkbox" id="${value}" name="interest" value="${value}">`)

.append(`<label for="${value}">${value}</label></div>`)

.append(`<br>`);

}

})

});

HTML

<!doctype html>

<html>

<body>

<div>

<button id="submit">Create Checkbox</button>

</div>

</body>

</html>

CSS

label {

font: 15px 'Exo 2', sans-serif;

}

input {

margin: 6px;

}

button {

margin-top: 10px;

padding: 2 2;

font: 15px 'Exo 2', sans-serif;

}

Edit in JSFiddle

That’s all about dynamically creating a checkbox in JavaScript and jQuery.