javascript - 使用 jquery 和 bootstrap CSS 创建动态复选框列表

Question

真的希望有人能帮助我，因为这让我发疯! 我对 Javascript 和 Bootstrap 比较陌生，所以我确信这是显而易见的事情

我正在尝试创建一组从数据数组到考勤表的复选框。 我正在使用 Bootstrap ，特别是复选框和按钮来生成一组动态按钮。

无论我尝试什么，按钮都无法正确绘制。下面的测试代码显示了一个正确绘制的按钮，然后当我尝试单击另一个按钮绘制更多按钮时，显示的内容格式不正确。它们很小，没有文字，也没有标签——希望这是有意义的。 工作按钮和创建按钮的 jquery 之间的一切看起来都一样，所以我完全不知所措!

function loadButtons() {
  for (var i = 1; i <= 6; i++) {
    var $chk = $('<div class="btn-group-toggle" data-toggle="buttons"><label class="btn btn-secondary active"><input type="checkbox" checked> Checked');
    $("#append").append($chk);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<h1>Hello, world!</h1>
<div id="append" name="append">Append here</div>
<button onclick="loadButtons()" b>button</button>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

Answer 1

我认为您只是错过了 label 和 div 的结束标记。

试试下面的代码-

function loadButtons() {
  for (var i = 1; i <= 6; i++) {
    var $chk = $('<div class="btn-group-toggle" data-toggle="buttons"><label class="btn btn-secondary active"><input type="checkbox" checked> Checked</label></div>');
    $("#append").append($chk);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<h1>Hello, world!</h1>
<div id="append" name="append">Append here</div>
<button onclick="loadButtons()" b>button</button>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>