On clicking button, it should dynamically load checkbox list

hi Uma PI,

Please use following code

>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSave').click(function() {
addCheckbox($('#txtName').val());
});
});
function addCheckbox(name) { sdfsdf
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
$('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
$('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
}
script>
head>
<body>
<div id="cblist">
<input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkboxlabel>
div>
<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />
body>
html>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Gajendra Jangid7y ago
hi Uma PI,

Please use following code
>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox($('#txtName').val());
    });
});

function addCheckbox(name) {  sdfsdf
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
   $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
}
script>
head>
<body>

<div id="cblist">
    <input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkboxlabel>
div>

<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />



body>
html>
0
Mohd Kashif7y ago
Hi Uma, please go through below link

https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular
0