I'm trying to add checkbox dynamically with its value.I"m able to see the value in the console, like this where as, it is displaying only checkbox in the page.This is my code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row text-center" >
<div style="width:30%;" id="cblist" ></div>
</div>
<input type="button" value="AddCheckbox" id="btnSave" />
<script type="text/javascript">
$(document).ready(function() {
$('#btnSave').click(function() {
addCheckbox();
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
$('<input/>', { type: 'checkbox', id: 'cb'+id, value: 'cb'+id,class:'col-xs-4'}).html('hello').appendTo(container);
}
</script>
Try below code, It's working.. and sure it will helpful for you..., I have used bootstape class, so it will looks fine & aligned..
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.checkbox + .checkbox, .radio + .radio {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<br/><br/>
<input type="button" value="AddCheckbox" id="btnSave" />
<input type="button" value="Display Checkbox value" id="displayBtn" />
<br/><br/>
<div class="row text-center" >
<div class="col-md-12" id="cblist" ></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSave').click(function() {
addCheckbox();
});
$('#displayBtn').click(function() {
displayValue();
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
$html = '<div class="checkbox col-md-4">';
$html += '<label><input type="checkbox" name="cb[]" value="cb'+id+'" id="cb'+id+'">hello '+id+'</label>';
$html += '</div>';
container.append($html);
}
function displayValue(){
$('input[type="checkbox"]:checked').each(function() { //Get the only checked item
console.log($(this).val());
});
}
</script>
</html>
I have update some code... that shows checked input values in console....,
You have to associate a <label> for each checkbox like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row text-center" >
<div style="width:30%;" id="cblist" ></div>
</div>
<input type="button" value="AddCheckbox" id="btnSave" />
<script type="text/javascript">
$(document).ready(function() {
$('#btnSave').click(function() {
addCheckbox();
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
$('<input/>', { type: 'checkbox', id: 'cb'+id, value: 'cb'+id,class:'col-xs-4'}).text('hsssello').appendTo(container);
$('<label />', { 'for': 'cb'+id, text: 'label'+id, class:'col-xs-8' }).appendTo(container);
}
</script>
Notice that the label contains the for attribute that refers to the particular checkbox.
For your play around i have also created a PLUNKR
