我试图使用 javascript 制作待办事项列表，但无法附加所选选项

Question

目的是要采取输入和创建单选按钮，并动态地标记，如选中后的列表，而来自我们写入的输入文本字段的标签名称。我可以用单选按钮做到这一点，但不能用标签。请帮帮我，我是新来的。

[小提琴] (http://jsfiddle.net/wju6t7k3/2/)

<div id = "container" >
  <div class="row">
  <div class="col-12">
  <input id = "txt" type = "text" placeholder="Add new.." >
  <button id="btn" value = "add" type = "button" onClick = "add()"  >
  </button>
  </div>
  <div id="done" class="col-12">
    
  </div>
  </div> <!-- row -->

<script>
  //js
  var j = 0;
  var textval="";
 function getInputValue(){
            // Selecting the input element and get its value 
            inputVal = document.getElementById("txt").value;
            
            // Displaying the value
            alert(inputVal);
        }

function add() {
  if (document.getElementById('txt').value != '') {
    j++;
    var title = document.getElementById('txt').value;
    var node = document.createElement('div');
    node.innerHTML = '<input type="checkbox" class="checkbox-round" id="check' + j + '" name="check' + j + '"><label for="check' + j + '">' + title + '</label>';
    document.getElementById('done').appendChild(node);
  }
}


input = document.getElementById("txt");

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   document.getElementById("btn").click();
   textval =this.value;
   onfocus=this.value='';
  }
});


function countChecked(event) {
alert(textval);
alert("balle");
getInputValue();
$(this).parent().parent().append(this).append('<label>textvalh</label>').append('<br>');
}

$("#container").on( "click", "input[type=checkbox]", countChecked );

function getForm(event) {
  event.preventDefault();
  var form = document.getElementById("task").value;
  console.log(form);
}

</script>

Answer 1

您必须为checkbox 及其label 创建一个容器或父元素，以便对其进行更多控制。

如果要分隔选中的复选框，则再制作一个div元素进行分隔。

这是一个示例，这是基于您的代码：

//js
var j = 0;

function add() {
  if (document.getElementById('txt').value != '') {
    j++;
    var title = document.getElementById('txt').value;
    var node = document.createElement('div');
    node.innerHTML = '<div><input type="checkbox" class="checkbox-round" id="check' + j + '" name="check' + j + '"><label for="check' + j + '">' + title + '</label></div>';
    document.getElementById('done').appendChild(node);
  }
}


input = document.getElementById("txt");

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   document.getElementById("btn").click();
   textval = this.value;
   this.value='';
  }
});

function countChecked(event) {
    const isChecked = event.currentTarget.checked;

  // Get parent of checkbox which is the closest <div> element
  const checkbox_parent = $(event.currentTarget).closest('div');

  if (isChecked)    // Move element to div with ID = selected
    checkbox_parent.appendTo('#selected')
  else  // Move element to div with ID = done
    checkbox_parent.appendTo('#done')
}


$('#container').on('change', 'input[type="checkbox"]', countChecked)

input, input:active{
  border:none;
  cursor: pointer;
  outline: none;
  
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: blue;
}
::-moz-placeholder { /* Firefox 19+ */
  color: blue;
}
:-ms-input-placeholder { /* IE 10+ */
  color: blue;
}
:-moz-placeholder { /* Firefox 18- */
  color: blue;
}

button{
   display:none;
}

.checkbox-round {
    width: 1.3em;
    height: 1.3em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.checkbox-round:checked {
    background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
  <div class="row">
    <div class="col-12" style="border: dashed red 3px;">
      <input id = "txt" type="text" placeholder="Add new.." />
      <button id="btn" value="add" type="button" onClick ="add()">Add</button>
      
      <div id="done" class="col-12" style="border: solid purple 3px;">
      </div>
      
      <div id="selected" class="col-12" style="border: solid gray 3px;">
      </div>
    </div>
  </div> <!-- row -->
</div>

编码愉快！