如何将 label 动态添加到复选框

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

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 2

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