Question

我正在创建一个Chrome扩展程序，该扩展程序允许用户创建待办事项列表。到目前为止，我已经可以输入任务并提交。现在，我希望此输入（它是一个列表）具有一个复选框。现在，每当用户提交任务时，该任务便被视为一个列表。

HTML：

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox"><label>test</label></li>
</ul>

Javascript：

$(() => {
   $('input').on('keypress', function(e) {
     if (e.keyCode == 13) {
       const newTask = $(this).val();
       if (newTask) {
         const li = document.createElement('li');
         li.textContent = newTask;
         $('#tasksUL').append(li);
         $(this).val("");
       }
     }
   });
 });

Answer 1

将孩子添加到li中，就像您在上面所做的一样。

const input=document.createElement('input')
         input.type="checkbox"
         li.append(input)

Answer 2

好吧，按照您的操作方式，您首先必须创建输入复选框及其标签，然后将其添加到列表中。

以下是您的代码示例：https://codepen.io/pedrovsn/pen/ZdqrGw

$(() => {
   $('input').on('keypress', function(e) {
     if (e.keyCode == 13) {
       const newTask = $(this).val();
       if (newTask) {
          const label = document.createElement('label')
          label.innerText = newTask;

            const checkbox = document.createElement('input');
          checkbox.name = 'checkbox';
          checkbox.type = 'checkbox';
          checkbox.value = newTask;

                    const li = document.createElement('li');
          li.appendChild(checkbox);
          li.appendChild(label);
                    $('#tasksUL').append(li);
          $(this).val("");
       }
     }
   });
 });

Answer 3

尝试一下...

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {

        var li = $("<li><input type='checkbox'<label>" + newTask + "</label></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox"><label>test</label></li>
</ul>

如何使每个<li>都有一个复选框（HTML和Javascript）

3 个答案: