如何将动态创建的复选框添加到引导行

How to add dynamically created Checkboxes to Bootstrap row

本文关键字:添加 复选框 动态 创建      更新时间:2023-09-26

我已经添加了一个引导行。现在我想在里面添加复选框这样复选框应该是并排显示的而不是像现在这样一行一行地显示。这是HTML

<div class="row" id="ReportRow">
        <div class="col-md-12">
        </div>
</div>
这里是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);

请帮我调整一下。谢谢。

小提琴

从你的代码中删除<br/>

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);