Javascript 如何动态创建funkyradio复选框？

我想使用Javascript动态创建复选框（如下所示）

<div id="funkyradio">
        <div class="funkyradio-default">
            <input type="checkbox" name="checkbox" id="checkbox1" checked/>
            <label for="checkbox1">First Option default</label>
        </div>
</div>

这就是我希望他们看起来的样子：

---

所以问题不在于创建它们，而在于使用Javascript创建它们时没有使用CSS中的样式。

只需将整个内容放入一个函数中，并为您想要创建的单选按钮的每个实例调用您的函数

<div id="funkyradio">
        <div class="funkyradio-default">
            <input type="checkbox" name="checkbox" id="checkbox1" checked/>
            <label for="checkbox1">First Option default</label>
        </div>
</div>

请记住ID必须是唯一的，因此请使用for循环

for (var i = 0; i < 10;i++) {
    CreateRadioButton(i);
}

function CreateRadioButton(index) {
  someDiv = document.getElementById('test');

  input = document.createElement('input');
  input.type = 'radio';
  input.name = 'radio';
  input.id = 'radio' + index;

  funkyradio = document.createElement('funkyradio-default');
  funkyradio.className = 'funkyradio-default';

  label = document.createElement('label');
  label.for = 'radio' + index;
  label.value = 'test';

  input.appendChild(label);
  funkyradio.appendChild(input);
  someDiv.appendChild(funkyradio);
}

for（变量i=0；i<10；i++）{
CreateRadioButton（i）；
}
函数CreateRadioButton（索引）{
someDiv=document.getElementById（'test'）；
输入=document.createElement（'input'）；
input.type='radio'；
input.name='radio'；
input.id='收音机'+索引；
funkyradio=document.createElement（'funkyradio-default'）；
funkyradio.className='funkyradio默认值'；
label=document.createElement（'label'）；
label.for=‘radio’+索引；
label.value='test'；
输入。追加子项（标签）；
funkyradio.appendChild（输入）；
someDiv.appendChild（funkyradio）；
}

此代码将呈现您的原始HTML（我添加了Bootstrap和FunkyRadio的CSS）：

let funkyradio=document.getElementsByClassName（'funkyradio'）[0]；
让funkyradio_默认为document.createElement（'div'）；
funkyradio_default.className='funkyradio default'；
让输入=document.createElement（'input'）；
input.type='复选框'；
input.name='checkbox'；
input.id='checkbox1'；
input.checked=true；
funkyradio_default.appendChild（输入）；
让label=document.createElement（'label'）；
label.for='checkbox1'；
label.innerHTML='First Option default'；
funkyradio_默认值.appendChild（标签）；
appendChild（funkyradio_默认值）
.funkyradio div{
明确：两者皆有；
溢出：隐藏；
}
.funkyradio标签{
宽度：100%；
边界半径：3px；
边框：1px实心#D1D3D4；
字体大小：正常；
}
.funkyradio输入[type=“radio”]：空，
.funkyradio输入[type=“checkbox”]：空{
显示：无；
}
.funkyradio输入[type=“radio”]：空~标签，
.funkyradio输入[type=“checkbox”]：空~标签{
位置：相对位置；
线高：2.5em；
文本缩进：3.25em；
边缘顶部：2米；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.funkyradio输入[type=“radio”]：空~标签：在，
.funkyradio输入[type=“checkbox”]：空~标签：之前{
位置：绝对位置；
显示：块；
排名：0；
底部：0；
左：0；
内容：''；
宽度：2.5em；
背景：#D1D3D4；
边界半径：3px 0 3px；
}
.funkyradio输入[type=“radio”]：悬停：未（：选中）~label，
.funkyradio输入[type=“checkbox”]：悬停：未（：选中）~label{
颜色：#888；
}
.funkyradio输入[type=“radio”]：悬停：未（：选中）~label:before，
.funkyradio输入[type=“checkbox”]：悬停：未（：选中）~标签：之前{
内容：'\2714'；
文本缩进：.9em；
颜色：#C2C2；
}
.funkyradio输入[type=“radio”]：选中~label，
.funkyradio输入[type=“checkbox”]：选中~label{
颜色：#777；
}
.funkyradio输入[type=“radio”]：选中~label:before，
.funkyradio输入[type=“checkbox”]：选中~label:之前{
内容：'\2714'；
文本缩进：.9em；
颜色：#333；
背景色：#ccc；
}
.funkyradio输入[type=“radio”]：焦点~label:before，
.funkyradio输入[type=“checkbox”]：焦点~标签：之前{
盒影：0 3px#999；
}
.funkyradio默认输入[type=“radio”]：选中~label:before，
.funkyradio默认输入[type=“checkbox”]：选中~label:before{
颜色：#333；
背景色：#ccc；
}
.funkyradio主输入[type=“radio”]：选中~label:before，
.funkyradio主输入[type=“checkbox”]：选中~label:之前{
颜色：#fff；
背景色：#337ab7；
}
.funkyradio成功输入[type=“radio”]：选中~label:before，
.funkyradio成功输入[type=“checkbox”]：选中~label:之前{
颜色：#fff；
背景色：#5cb85c；
}
.funkyradio危险输入[type=“radio”]：选中~label:before，
.funky无线电危险输入[type=“checkbox”]：选中~标签：之前{
颜色：#fff；
背景色：#d9534f；
}
.funkyradio警告输入[type=“radio”]：选中~label:before，
.funkyradio警告输入[type=“checkbox”]：选中~label:之前{
颜色：#fff；
背景色：#f0ad4e；
}
.funkyradio信息输入[type=“radio”]：选中~label:before，
.funkyradio信息输入[type=“checkbox”]：选中~label:之前{
颜色：#fff；
背景色：#5bc0de；
}
这是一种优雅的纯JS方式，即使在旧浏览器中也应该可以使用


let fr=document.createElement（'div'）；
fr.classList.add（'funkyradio'）；
设frd=document.createElement（'div'）；
frd.classList.add（'funkyradio-dafault'）；
设i=document.createElement（'input'）；
i、 setAttribute（'type'，'checkbox'）；
i、 setAttribute（'name'，'checkbox'）；
i、 setAttribute（'id'，'checkbox1'）；
i、 setAttribute（'checked'，'checked'）；
设l=document.createElement（'label'）；
l、 setAttribute（'for'，'checkbox1'）；
l、 appendChild（document.createTextNode（'First option default'）；
法国联邦储备银行（frd）；
frd.儿童（i）；
frd.儿童（l）；
文件.正文.附件（fr）您可以使用字符串操作来实现这一点。或者使用函数并执行innerHTML。
下一步：包含复选框的div的样式必须定义总宽度。
然后，您可以将复选框和标签浮动到该div中。只要复选框和标签的长度小于父div，它们就会按照您的需要对齐。
备选方案：如果每个复选框位于100%宽度的div中。它们将对齐，因为div将自身绘制为画布上的块级项目（默认）


动态复选框创建者
输入{
边框：5px纯红；
利润率：10px；
宽度：100px；
}
.盒子盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒盒{
宽度：101px；
}
变量复选框名称=[“一”、“二”、“三”、“四”、“五”、“六”、“七”、“八”、“九”]；
var container=document.getE
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Checkbox creator</title>
</head>
<style type="text/css">
    input{
    border: 5px solid red;
    margin:10px;
    width: 100px;
    }
    .box_holder{
    width: 101px;
    }
</style>
<body>
    <div id="checkbox_container" class="box_holder"></div>

    <script type="text/javascript">
      var checkbox_names    = ["one","two","three","four","five","six","seven","eight","nine"];
      var container         = document.getElementById("checkbox_container");

      for (var i = 0; i < checkbox_names.length; i++) {
       var result   = "<input type='checkbox' name='"+ checkbox_names[i] +"'>";
       container.innerHTML = container.innerHTML + result; //same as container.innerHTML+=result;
     }
    </script>
</body>
</html>