Question

考虑以下代码：

<p>Select letter: </p>

<input id="check type="checkbox" value="A"> A <br>
<input id="check type="checkbox" value="B"> B <br>
<input id="check type="checkbox" value="C"> C <br>
<input id="check type="checkbox" value="D"> D <br>
<input id="check type="checkbox" value="E"> E <br>
<input id="check type="checkbox" value="F"> F <br>
<input id="check type="checkbox" value="G"> G <br>

<div id="list">

</div>

假设我只检查了字母A，C，E和G。

如何使用JavaScript将它放在无序列表的#list中：

A
C
E
G

编辑：

感谢您发表评论，我需要首先尝试解决我所遇到的问题。我尝试使问题尽可能简短，以免浪费您的时间。但是如果您想在解决此问题之前想知道我的情况。这就是我所做的。

//HTML       
<input class="messageCheckbox" onclick="changeInclusions()" type="checkbox" value="A"> A<br>
       <input class="messageCheckbox" onclick="changeInclusions()" type="checkbox" value=" B"> B <br>
       <input class="messageCheckbox" onclick="changeInclusions()" type="checkbox" value="C">C <br>
      <input class="messageCheckbox" onclick="changeInclusions()" type="checkbox" value="D" > D <br>
      <input class="messageCheckbox" onclick="changeInclusions()" type="checkbox" value="E" checked> E



     //JS   
document.getElementByclass('messageCheckbox').addEventListener('change', changeletter);

        function changeletter() {
          let checkedValue = document.querySelector('.messageCheckbox:checked').value;
          document.getElementById('list').innerHTML = checkedValue  ;
        }

Answer 1

您尝试这样做吗？

$('.myckeck').on('change', function () {
    if(this.checked==true){
       $('#list').append('<li id='+$(this).val()+'>'+$(this).val()+'</li>');
    }else{
       $('#'+$(this).val()).remove();  
    }    
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p>Select letter: </p>

<input type="checkbox" value="A" class="myckeck"> A <br>
<input type="checkbox" value="B" class="myckeck"> B <br>
<input type="checkbox" value="C" class="myckeck"> C <br>
<input type="checkbox" value="D" class="myckeck"> D <br>
<input type="checkbox" value="E" class="myckeck"> E <br>
<input type="checkbox" value="F" class="myckeck"> F <br>
<input type="checkbox" value="G" class="myckeck"> G <br>

<div>
    <ul id="list">       
   </ul>
</div>

Answer 2

这是一种方法，每次复选框更改时更新无序列表

[].map.call(document.querySelectorAll("#check"), n => n.addEventListener("change", updateList))

function updateList() {
  const list = document.querySelector("#list");
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }
  let checked = document.querySelectorAll("#check:checked");
  [].map.call(checked, (n) => {
    let li = document.createElement("li");
    li.innerText = n.value;
    list.appendChild(li);
  })
}

<p>Select letter: </p>
<input id="check" type="checkbox" value="A"> A <br>
<input id="check" type="checkbox" value="B"> B <br>
<input id="check" type="checkbox" value="C"> C <br>
<input id="check" type="checkbox" value="D"> D <br>
<input id="check" type="checkbox" value="E"> E <br>
<input id="check" type="checkbox" value="F"> F <br>
<input id="check" type="checkbox" value="G"> G <br>
<div id="list">

</div>

在复选框中获取检查值并放入列表中

2 个答案: