How can I add a label to a checkbox dynamically

Question

I want my checkboxes to look like this:

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

How can I add some labels?

My code:

      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

<input /> tags are self-closing. To add a label to a checkbox, you need to wrap it inside that label:

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

Here is a demo:

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 2

A label in html is a seperate HTML element:

<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"/>

Try adding something like this to your function:

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

Answer 3

There are several ways to do what you want

• DOM API
• Template literals
• <template>

Please take a look at the following example

Using Template literals

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>

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

The problem with the DOM API is that it can quickly become very verbose and repetitive, and the sum of this makes it difficult to maintain.