Question

如何创建复选框列表并在javascript中检索所选复选框值

Answer 1

假设一个结构：

<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>

然后使用类似的东西来检索值：

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(', '));

Answer 2

要在DOM中创建元素，请使用document.createElement。要检索所选的复选框值，请使用element.checked和/或element.value。要详细了解HTML DOM，start here。

您可能需要考虑使用jQuery来简化所有DOM操作和遍历工作。

Answer 3

更现代的答案

document.querySelector("[name=test]").addEventListener("click", 
  e => {
    let 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(", ")
    }   
})

<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>
<span id="res"></span>

如何创建复选框列表

3 个答案: