Lara Lara - 3 months ago 16
HTML Question

How to add dynamically created Checkboxes to Bootstrap row

I have added a bootstrap row. Now inside that I want to add checkbox such that checkboxes should display side by side not as line by line as it is now. Here is the HTML.

<div class="row" id="ReportRow">
<div class="col-md-12">
</div>
</div>


and here is the jquery

var Reports = "User, Admin, Detail, Summary";
var arrReportscheckBoxItems = Reports.split(',');
var reportscheckBoxhtml = ''
for (var i = 0; i < arrReportscheckBoxItems.length; i++) {
reportscheckBoxhtml += '<label style="font-weight: 600; color: #00467f !important;"><input type="checkbox" value=' + arrReportscheckBoxItems[i] + '>' + arrReportscheckBoxItems[i] + '</label><br\>';
}
$('#ReportRow').html(reportscheckBoxhtml);


Plesae help me to align it properly. Thanks.

Answer

Fiddle

Just remove the <br/> from ur code

var Reports = "User, Admin, Detail, Summary";
var arrReportscheckBoxItems = Reports.split(',');
var reportscheckBoxhtml = ''
for (var i = 0; i < arrReportscheckBoxItems.length; i++) {
      reportscheckBoxhtml += '<label style="font-weight: 600; color: #00467f !important;"><input type="checkbox" value=' + arrReportscheckBoxItems[i] + '>' + arrReportscheckBoxItems[i] + '</label>&nbsp;';
}
$('#ReportRow > .col-md-12').html(reportscheckBoxhtml);