Question

我想使用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>

这是我到目前为止尝试过的：

someDiv = document.getElementById('funkyradio');

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

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

label = document.createElement('label');
label.for = 'radio1';
label.value = 'test';

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

https://jsfiddle.net/ng5wx021/1/

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

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

Answer 1

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

记住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);
}

Answer 2

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

let funkyradio = document.getElementsByClassName('funkyradio')[0];

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

let input = document.createElement('input');
input.type = 'checkbox';
input.name = 'checkbox';
input.id = 'checkbox1';
input.checked = true;
funkyradio_default.appendChild(input);

let label = document.createElement('label');
label.for = 'checkbox1';
label.innerHTML = 'First Option default';
funkyradio_default.appendChild(label);

funkyradio.appendChild(funkyradio_default);

.funkyradio div {
  clear: both;
  overflow: hidden;
}

.funkyradio label {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
  font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  line-height: 2.5em;
  text-indent: 3.25em;
  margin-top: 2em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  background: #D1D3D4;
  border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #888;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #C2C2C2;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
  color: #777;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #333;
  background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
  color: #333;
  background-color: #ccc;
}

.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #337ab7;
}

.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #5cb85c;
}

.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #d9534f;
}

.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #f0ad4e;
}

.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #5bc0de;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="funkyradio"></div>

Answer 3

这是一种优雅的纯JS方式，即使在旧的浏览器中也应该可以使用。

let fr = document.createElement('div');
fr.classList.add('funkyradio');

let frd = document.createElement('div');
frd.classList.add('funkyradio-dafault');

let i = document.createElement('input');
i.setAttribute('type', 'checkbox');
i.setAttribute('name', 'checkbox');
i.setAttribute('id', 'checkbox1');
i.setAttribute('checked', 'checked');

let l = document.createElement('label');
l.setAttribute('for', 'checkbox1');
l.appendChild(document.createTextNode('First option default'));

fr.appendChild(frd);
frd.appendChild(i);
frd.appendChild(l);
document.body.appendChild(fr);

Answer 4

您可以使用字符串操作来实现。或使用函数执行innerHTML。下一步：包含复选框的div样式必须定义总宽度。然后，您可以将浮动复选框和标签留在该div中。只要复选框和标签的长度小于父div的长度，它们就会根据需要对齐。备选：如果每个复选框位于100％宽度的div中。它们将对齐，因为div将自身绘制为画布上的块级项目（默认）。

<!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>

如何动态创建funkyradio复选框？

4 个答案: