如何附加由 'li' 包裹的复选框输入？

Question

我设法在 'ul' 中输入了 'li'，但我需要在 li 中输入一个复选框，但我似乎不知道该怎么做。

<body>
    <div class="card">
        
        <h1>To-do list</h1>
        
        <input type="text" id="taskInput" placeholder="Digite aqui sua tarefa">
        <button id="add">Adicionar</button>
        
        <ul id='tasks'>
            <li><input type="checkbox"> Tarefa 1</li>
        </ul>
        
    </div>
    <script>

      document.getElementById('add').onclick = function add() {

        const val = document.querySelector('input').value;
        const ul = document.getElementById('tasks');
        let li = document.createElement('li');
    
        li.appendChild(document.createTextNode(val));
        ul.appendChild(li);
      };

    </script>
</body>

Answer 1

您只需将类型设置为复选框即可。

   document.getElementById('add').onclick = function add() {
    var input = document.createElement("INPUT");
    input.setAttribute("type", "checkbox");
    const ul = document.getElementById('tasks');
    let li = document.createElement('li');

    li.appendChild(document.createTextNode(input));
    ul.appendChild(li);
  };

Answer 2

与其他元素相同，只是作为 'checkbox'

类型的输入

同样出于可访问性目的，最好使用 label 而不是文本节点。

const val = document.querySelector('input').value;
const ul = document.getElementById('tasks');

let li = document.createElement('li');

let checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = 'tasks-' + val;
checkbox.value = val;
checkbox.setAttribute('name', 'tasks');

let label = document.createElement('label');
label.htmlFor = checkbox.id;
label.innerText = val;

li.appendChild(checkbox);
li.appendChild(label);
ul.appendChild(li);

Answer 3

尝试创建元素 input 并将 type 指定为 checkbox 并将其添加到创建的元素li 首先，然后添加输入的 文本值，最后将其附加到 ul:

document.getElementById("add").onclick = function () { const val = document.querySelector("#taskInput").value; //specify the selector const ul = document.getElementById("tasks"); let li = document.createElement("li"); let input = document.createElement("input"); //add Input input.type = "checkbox"; //specify the type of input to checkbox li.appendChild(input); li.appendChild(document.createTextNode(val)); ul.appendChild(li); };

<div class="card"> <h1>To-do list</h1> <input type="text" id="taskInput" placeholder="Digite aqui sua tarefa" /> <button id="add">Adicionar</button> <ul id="tasks"> <li><input type="checkbox" /> Tarefa 1</li> </ul> </div>

Answer 4

创建 li 后，只需向其附加一个复选框子项即可：

let chk = document.createElement('input');
chk.setAttribute('type', 'checkbox');

li.appendChild(chk)

Answer 5

您可以使用此代码

<script>

  document.getElementById('add').onclick = function add() {

    const val = document.querySelector('input').value;
    const ul = document.getElementById('tasks');
    let li = document.createElement('li');

    let input = document.createElement('input');
    input.type='checkbox'
    li.appendChild(input)
    li.appendChild(document.createTextNode(val));
    ul.appendChild(li);
  };

</script>

Answer 6

    *This method is faster and cleaner*
    
<script>
 document.getElementById('add').onclick = function add() {
      const ul = document.getElementById('tasks');
    
      const val = document.querySelector('input').value;
    
      ul.innerHTML += `<li>${val}</li>`;
 };
</script>

如何附加由 'li' 包裹的复选框输入？

How can I append a checkbox input wrapped by the 'li'?

javascript

list

append