Question

我希望我的复选框如下所示：

<input type="checkbox"name="id">Check 1</input>
<input type="checkbox"name="id">Check 2</input>
<input type="checkbox"name="id">Check 3</input>

如何添加一些标签？

我的代码：

      response.forEach(row => {
         var checkbox = document.createElement('input');
         checkbox.type = "checkbox";
         checkbox.name =  model.toLowerCase()+"_id";
         checkbox.value = row.id;
         control.appendChild( checkbox);
      });

Answer 1

html中的标签是单独的HTML元素：

<label for="my_checkbox_1">Checkbox 1</label>
<input type="checkbox" id="my_checkbox_1"/>
<br>
<label for="my_checkbox_2">Checkbox 2</label>
<input type="checkbox" id="my_checkbox_2"/>
<br>
<label for="my_checkbox_3">Checkbox 3</label>
<input type="checkbox" id="my_checkbox_3"/>

尝试在函数中添加如下内容：

var label = document.createElement('label');
label.htmlFor = "ID_OF_CHECKBOX_HERE";
label.innerHTML = "LABEL_TEXT_HERE";

Answer 2

<input />标签是自动关闭的。要将标签添加到复选框，您需要将其包装在该标签内：

<label><input type="checkbox" name="id"> Check 3</label>

这是一个演示：

var response = [{id: 1, name: "Check 1"}, {id: 2, name: "Check 2"}, {id: 2, name: "Check 3"}];
var model = "foo";

response.forEach(row => {
  // Create a label
  var label = document.createElement('label');
  // Create a checkbox
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.name = model.toLowerCase() + "_id";
  checkbox.value = row.id;
  // Append the checkbox to the label
  label.appendChild(checkbox);
  // Append the label text to the label
  label.appendChild( document.createTextNode(row.name) );
  // Append the label to the control area
  control.appendChild(label);
});

label { display: block; }

<div id="control"></div>

Answer 3

有几种方法可以做你想要的事

请看下面的例子

使用模板文字

const response = [
  {
    id: 1,
  },
  {
    id: 2,
  },
  {
    id: 3,
  },
  {
    id: 4,
  },
];

const inputs = response
  .map(
    ({ id }) => `<label>
      <input type="checkbox" name="${id}" />
      Check ${id}
    </label>`
  )
  .join("");

document.querySelector("#root").innerHTML = inputs;

<div id="root"></div>

使用<template>

const response = [
  {
    id: 1,
  },
  {
    id: 2,
  },
  {
    id: 3,
  },
  {
    id: 4,
  },
];

const root = document.querySelector("div#root");
const template = document.querySelector("#input-template");

response.forEach(({ id }) => {
  const clone = template.content.cloneNode(true);

  clone.querySelector('input[type="checkbox"]').setAttribute("name", id);
  clone.querySelector("span").textContent = `Check ${id}`;

  root.appendChild(clone);
});

<div id="root"></div>

<template id="input-template">
  <label> <input type="checkbox" name="" id="" /> <span></span> </label>
</template>

DOM API的问题在于，它很快就会变得非常冗长和重复，并且加总起来使其难以维护。

如何动态将标签添加到复选框

3 个答案: