javascript - 显示复选框中的所有选定项目

Question

我正在使用 this codepen作为基础。

HTML

<form>
  <div>
    <input type="radio" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>

jQuery

$("input").on("click", function() {
  $("#log").html($("input:checked").val() + "");
});

我已将单选按钮更改为复选框 - 但我想更改 js，以便每个选定的项目都显示在列表的底部，而不仅仅是第一个。

目的是进行 self 意识练习——即用户可以从一长串列表中选择适用于他们的所有陈述，然后他们会得到一个输出，将范围缩小到他们选择的那些。表单响应不需要在任何地方保存/提交。

如何做到这一点？

Answer 1

$( "input" ).on( "click", function(e) {
 if(e.currentTarget.checked){
  var div = document.createElement("p");
  div.id=e.target.value+"1";
   div.innerHTML=e.target.value;
  var tar=document.getElementById("log");
  tar.appendChild(div);
} else {
  var tag = document.getElementById(e.target.value+"1");
  tag.parentNode.removeChild(tag);

 }  
});

您可以试试它的工作原理。 现在，当您单击橙色时，将显示并取消选中。