Javascript 如何创建复选框列表

如何在javascript中创建复选框列表并检索选中的复选框值要在DOM中创建元素，请使用。要检索所选复选框值，请使用和/或。要了解有关HTMLDOM的更多信息

---

您可能想考虑使用所有的DOM操作和遍历工作。

< P>假定结构如下：

<form name="test">
  <input type="checkbox" name="colors" value="red'/>
  <input type="checkbox" name="colors" value="orange'/>
  <input type="checkbox" name="colors" value="yellow'/>
  <input type="checkbox" name="colors" value="blue'/>
</form>

更现代的答案


document.querySelector（“[name=test]”）。addEventListener（“单击”，
e=>{
设tgt=e.target；
if（tgt.name==“colors”）{
let checked=[…e.currentTarget.querySelectorAll（`[name=${tgt.name}]：checked`]；
document.getElementById（“res”）.innerHTML=checked.map（inp=>inp.value）.join（“，”）
}   
})

您是在询问如何在HTML中创建一组复选框，然后使用javascript获取所选值，还是也要使用javascript动态创建它们？@ryanulit。。我不想动态创建它。。。！！！只是在htmlOh中创建一个复选框列表？我建议你也要学习HTML教程。我建议一个不错的教程：（W3Schools很容易出错，而且到处都是广告，看起来（直到你读到一半）像是教程的一部分）htmldog.com也是另一个很好的教程。
id
比
name
更适合识别表单。@David（更喜欢id而不是name）这只是为了简单吗？使用name属性是可以的，如果您知道位置，那么通过索引访问也是可以的。然而，如果我要使用document.getElementById（id）函数，那么我肯定会使用一个id.Hmm，在浏览了W3C之后，我发现也许name在将来会倾向于使用id@大卫：个人而言，我并不总是给我的表单元素id，但总是给它一个名字。在古代网景公司统治这片土地的时候，
name
被到处使用。然后，HTML标准化为使用
name
作为表单控件，使用
id
和
class
作为脚本。XHTML1.0从表单中删除了name属性，XHTML1.1从锚点中删除了它（因此，如果你的示例应该是XHTML，那么它是无效的（我不能不检查就支持HTML5草案，但无论如何它是草案））。谢谢@David-这是一个有趣的问题。。。XHTML确实删除了它，但我们现在知道。。。XHTML正逐渐成为支持HTML5的死胡同。在HTML5中，name属性仍然存在（并且当前不包括任何反对使用它的信息或警告）。综上所述，由于name属性实际上没有在表单提交中使用，因此id属性可能更有用。
var values = [];
var cbs = document.forms['test'].elements['colors'];
for(var i=0,cbLen=cbs.length;i<cbLen;i++){
  if(cbs[i].checked){
    values.push(cbs[i].value);
  } 
}
alert('You selected: ' + values.join(', '));