Javascript 如何定制复选框

如何编辑复选框使其看起来像这样： 我在引导程序上没有找到任何东西

当前我的复选框列表如下所示：

在我的cshtml中，我有一个空div，它是从javascript填充的

<div id="check-list-box" class="list-group checked-list-box">

</div>

Javascript:

for (i = 0; i < brUredjaja; i++) {
  var brParametara = data[i].series.length;

  if ((brParametara > 1) || (brUredjaja > 1)) {
    for (j = 0; j < brParametara; j++) {
      {
        $("#graphId").append("<div class='graphReport col-md-6' id = div" + i + "dev" + j + "></div>");
        $('#check-list-box').append('<input type="checkbox" checked id="myCheckbox" />' + data[i].series[j].name);
        InitGraph(data[i].dates, data[i].series[j].data, "div" + i + "dev" + j, data[i].series[j].name, data[i].deviceName);
      }
    }
  }
}

for（i=0；i1）| |（brUredjaja>1））{
对于（j=0；j

将类名添加到复选框中，并编辑其CSS。

---

将引导您找到一些可以从中获得“如何”的示例

请将此代码用于自定义复选框-

.custom复选框{
左侧填充：30px；
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
字号：500；
字体系列：arial；
垫面：3件；
边缘底部：15px；
}
.自定义复选框输入[type=“checkbox”]+span:before{
内容：“；
宽度：20px；
高度：20px；
边框：2px实心#383a43；
位置：绝对位置；
左：0；
排名：0；
}
.自定义复选框输入[type=“checkbox”]+span:after{
内容：“；
宽度：10px；
高度：5px；
左边框：2倍实心；
边框底部：2倍实心；
位置：绝对位置；
左：5px；
顶部：6px；
变换：旋转（-39度）；
可见性：隐藏；
不透明度：0；
过渡：所有0.4s缓解；
}
.custom复选框输入[type=“checkbox”]{display:none；}
.自定义复选框输入[type=“checkbox”]：选中+span:after{
能见度：可见；
不透明度：1；
}

复选框1


复选框2


复选框3


复选框4

浏览一下该网站可能会对您有所帮助。