Create a radio button dynamically with JavaScript/jQuery

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

1. Using jQuery

With jQuery, you can set radio button attributes using the .prop() method and .append() method to append the radio button at the end of a container.

The following example creates a radio button, its label, and optionally a <br> tag.

JS

$(document).ready(function() {

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

$('#container').append(

$('<input>').prop({

type: 'radio',

id: 'email',

name: 'contact',

value: 'Email'

})

).append(

$('<label>').prop({

for: 'email'

}).html('Email')

).append(

$('<br>')

);

})

});

HTML

<!doctype html>

<html>

<body>

<div>

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

</div>

</body>

</html>

Edit in JSFiddle

You can extend the solution to create multiple radio buttons in one go:

JS

$(document).ready(function() {

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

var radios = ['Email', 'Phone', 'Mail'];

for (var value of radios)

{

$('#container').append(

$('<input>').prop({

type: 'radio',

id: value,

name: 'contact',

value: value

})

).append(

$('<label>').prop({

for: value

}).html(value)

)

}

})

});

HTML

<!doctype html>

<html>

<body>

<div>

<button id="submit">Create radio buttons</button>

</div>

</body>

</html>

Edit in JSFiddle

Alternatively, here’s a shorter version:

JS

$(document).ready(function() {

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

var radios = ['Email', 'Phone', 'Mail'];

for (var value of radios) {

$('#container')

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

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

.append(`<br>`);

}

})

});

HTML

<!doctype html>

<html>

<body>

<div>

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

</div>

</body>

</html>

Edit in JSFiddle

2. Using JavaScript

To create a radio button programmatically in plain JavaScript, you can use the document.createElement() method. The following example creates a new radio button with necessary attributes and appends it to a container using the Node.appendChild() method.

JS

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

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

radiobox.type = 'radio';

radiobox.id = 'contact';

radiobox.value = 'email';

var label = document.createElement('label')

label.htmlFor = 'contact';

var description = document.createTextNode('Email');

label.appendChild(description);

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

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

container.appendChild(radiobox);

container.appendChild(label);

container.appendChild(newline);

}

HTML

<!doctype html>

<html>

<body>

<div>

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

</div>

</body>

</html>

Edit in JSFiddle

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

Create a radio button dynamically with JavaScript/jQuery

1. Using jQuery

JS

HTML

JS

HTML

JS

HTML

2. Using JavaScript

JS

HTML

Share this: