作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
真的希望有人能帮助我,因为这让我发疯!我对 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>
最佳答案
我认为您只是错过了 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>
关于javascript - 使用 jquery 和 bootstrap CSS 创建动态复选框列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59211263/
我是一名优秀的程序员,十分优秀!