显示不在javascript中工作的选定复选框

我想在单击“提交”时显示所选复选框的名称

例如：

如果未选中复选框，则应显示，请选择爱好。 如果已选中“绘制”，则显示“绘制” 如果选中“绘制和读取”，则显示“读取绘制” 下面给出的代码不起作用

功能显示爱好{ 让HobbiesInput=[document.getElementById'dancing'， document.getElementById'reading'， document.getElementById'painting']； var HobbiesError=； forvar i=0；i 功能显示爱好{ 让HobbiesInput=[document.getElementById'dancing'， document.getElementById'reading'， document.getElementById'painting']； var HobbiesError=；

---

forvar i=0；i在代码中，如果有未选中的框，代码将添加“请选择爱好”消息

相反，在最后检查，这将起作用：

功能显示爱好{ 让霍布斯输入=[ document.getElementById'dancing'， document.getElementById'reading'， document.getElementById'painting' ]; var HobbiesError=； 对于var i=0；i嗜好：这里有一个执行此操作的代码段。我们将侦听器附加到表单，而不是每个输入。然后，我们查看单击的内容是否实际上是一个输入类型复选框。如果选中，我们将其值推送到要显示在顶部的数组中，如果未选中，我们将从该数组中删除。然后，我们选择一个要呈现的元素你的列表，并呈现。希望它有帮助

让值=[]； const form=document.getElementById'form' form.addEventListener'click'，e=>{ 如果！e.target.type=='checkbox'返回； 常量值=e.target.value； const checked=e.target.checked； 如果检查{ 值 }否则{ 常量newValues=values.filterv=>v！==value； 值=新值； } const valuesList=document.getElementById'valuesList' valuesList.innerHTML=values.mapm=>`${m}`.加入 } 我有一辆自行车 我有一辆车

---

这里有一些更干净的东西：

function displayHobbies() {

  let HobbiesInput = [
      document.getElementById('dancing'),
      document.getElementById('reading'),
      document.getElementById('painting')
  ];

  // flag if no hobby is checked
  var noHobbiesChecked = true;

  // reset display area
  document.getElementById('hobbies_display').innerHTML = "";

  for (var i = 0; i < HobbiesInput.length; i++) {

    if (HobbiesInput[i].checked === true)   {
      // add hobby to display area
      document.getElementById('hobbies_display').innerHTML += "#"+HobbiesInput[i].name;
      // turn off the flag since we have at least one hobby checked
      noHobbiesChecked = false; 
    }

  }

  if (noHobbiesChecked === true) {
    // show error
    document.getElementById('hobbies_display').innerHTML = "Please select a hobby";
  }

}

---

为什么表单标签上有一个onclick？你不想提交吗？首先，每次单击某个内容时，你都应该清除显示标签。其次，for循环不会检查它们是否都未选中以显示该消息，它会检查是否有未选中的项。因此，如果前两项已选中，但最后一项未选中，它将查看最后一个，查看是否未选中，然后将消息设置为“未选中任何内容”。@epascarello应该是onclick…我不想提交表单，但这是表单内部的任何单击，而不是单击按钮。因此提交表单并防止默认值。@MegCullen您可以通过选中标记接受答案，以帮助其他人最好回答谢谢你的帮助！！：