如何将选中复选框的输入值添加到列表中？

Question

我在将选中复选框的输入值添加到列表时遇到问题。我不知道如何为合适的 ul 创建新元素。

document.addEventListener("DOMContentLoaded", function() {

  var checkboxDays = document.querySelectorAll('.checkboxDay');
  var allDays = document.querySelector('.allDays');
  var noteText = document.querySelector('.note-text')
  var form = document.querySelector('form');
  var btn = document.querySelector('.button');
  var dayBoxes = document.querySelectorAll('.dayBox ul');

  btn.addEventListener('click', function() {
    var dataItem = noteText.value;
    var li = document.createElement('li');
    li.innerText = dataItem;

    for (var i = 0; i < checkboxDays.length; i++) {
      if (checkboxDays[i].checked) {
        dayBoxes[i].appendChild(li);
      }
    }
  });
});

<form class="input-form">
  <div class='note-cnt'>
    <input type="text" class="note-text" placeholder="Add your note"></input>
  </div>
  <div class="checkbox-cnt">
    <h2>Check Day/s</h2>
    <label>Monday</label><input type="checkbox" class="checkboxDay" />
    <label>Tuesday</label><input type="checkbox" class="checkboxDay" />
    <label>Wednesday</label><input type="checkbox" class="checkboxDay" />
    <label>Thursday</label><input type="checkbox" class="checkboxDay" />
    <label>Friday</label><input type="checkbox" class="checkboxDay" />
    <label>Saturday</label><input type="checkbox" class="checkboxDay" />
    <label>Sunday</label><input type="checkbox" class="checkboxDay" />
    <label>AllDays</label><input type="checkbox" class="allDays" />

  </div>
  <button class="button" type="button">
                <span>Add item</span>
            </button>


</form>
</section>
<div class="allBox">
  <div class="dayBox">
    <h3>Monday</h3>
    <ul class="monday"></ul>
  </div>
  <div class="dayBox">
    <h3>Tuesday</h3>
    <ul class="tuesday"></ul>
  </div>
  <div class="dayBox">
    <h3>Wednesday</h3>
    <ul class="wednesday"></ul>
  </div>
  <div class="dayBox">
    <h3>Thursday</h3>
    <ul class="thursday"></ul>
  </div>
  <div class="dayBox">
    <h3>Friday</h3>
    <ul class="friday"></ul>
  </div>
  <div class="dayBox">
    <h3>Saturday</h3>
    <ul class="saturday"></ul>
  </div>
  <div class="dayBox">
    <h3>Sunday</h3>
    <ul class="sunday"></ul>
  </div>
</div>

Answer 1

出现此错误是因为您只创建了一个 <li> 元素，并且实际上将该元素移动到了 <ul> 元素之间的循环内。您必须为循环内的每个单独的 <ul> 元素创建 <li> 元素并附加它。

示例：

document.addEventListener( 'DOMContentLoaded', function () {
    var checkboxDays = document.querySelectorAll( '.checkboxDay' ),
        allDays = document.querySelector( '.allDays' ),
        noteText = document.querySelector( '.note-text' ),
        form = document.querySelector( 'form' ),
        btn = document.querySelector( '.button' ),
        dayBoxes = document.querySelectorAll( '.dayBox ul' );

    btn.addEventListener( 'click', function () {
        var dataItem = noteText.value;

        for ( var i = 0; i < checkboxDays.length; i++ ) {
            if ( checkboxDays[ i ].checked ) {
                var li = document.createElement( 'li' );

                li.innerText = dataItem;
                dayBoxes[ i ].appendChild( li );
            }
        }
    } )

    allDays.addEventListener( 'click', function () {
        for ( var i = 0; i < checkboxDays.length; i++ ) {
            checkboxDays[ i ].checked = allDays.checked ? true : false
        }
    } )
} )

h3, ul {
  margin: 0
}

<form class="input-form">
    <h2>Check Day/s:</h2>
    <div class='note-cnt'>
        <input type="text" class="note-text" placeholder="Add your note">
    <button class="button" type="button">Add item</button>
    </div>
    <div class="checkbox-cnt">
        <label>Monday</label><input type="checkbox" class="checkboxDay" />
        <label>Tuesday</label><input type="checkbox" class="checkboxDay" />
        <label>Wednesday</label><input type="checkbox" class="checkboxDay" />
        <label>Thursday</label><input type="checkbox" class="checkboxDay" />
        <label>Friday</label><input type="checkbox" class="checkboxDay" />
        <label>Saturday</label><input type="checkbox" class="checkboxDay" />
        <label>Sunday</label><input type="checkbox" class="checkboxDay" />
        <label>AllDays</label><input type="checkbox" class="allDays" />
    </div>
</form>
<br>
<div class="allBox">
    <div class="dayBox">
        <h3>Monday</h3>
        <ul class="monday"></ul>
    </div>
    <div class="dayBox">
        <h3>Tuesday</h3>
        <ul class="tuesday"></ul>
    </div>
    <div class="dayBox">
        <h3>Wednesday</h3>
        <ul class="wednesday"></ul>
    </div>
    <div class="dayBox">
        <h3>Thursday</h3>
        <ul class="thursday"></ul>
    </div>
    <div class="dayBox">
        <h3>Friday</h3>
        <ul class="friday"></ul>
    </div>
    <div class="dayBox">
        <h3>Saturday</h3>
        <ul class="saturday"></ul>
    </div>
    <div class="dayBox">
        <h3>Sunday</h3>
        <ul class="sunday"></ul>
    </div>
</div>