javascript - 获取元素内的复选框

Question

我有一个 <div id="myDiv">包含一些 <input type="checkbox">和 <br/> .现在我想循环遍历 div 的所有元素，如果元素是复选框并选中则做一些事情。我已经试过了

var e = document.getElementById("myDiv");
var c;
for(c in e.children){
    if(c.checked) {
        //...
    }
}

但是c.checked始终未定义。谁能告诉我该怎么做？

Answer 1

你可以直接去定位你的 :checked 使用:

const ckbChecked = document.querySelectorAll("#myDiv input[type=checkbox]:checked");

或者一个接一个，而不是根据 bool Element.checked 属性状态来弄清楚如何处理每个相应的对象:

const ckb = document.querySelectorAll("#myDiv input[type=checkbox]");

[...ckb].forEach( el => {

  if( el.checked ) {
    // Is checked!
    console.log( el.value )
    el.closest("label").style.background = "gold";
  } else {
    // Not checked one
    // ... do something else
    el.closest("label").style.background = "gray";
  }

});

<div id="myDiv">
  <label><input type="checkbox" value="foo"> Foo</label>
  <label><input type="checkbox" value="bar" checked> Bar</label>
  <label><input type="checkbox" value="baz"> Baz</label>
</div>