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");

或逐个，而不是根据布尔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>

Answer 2

实际上选中复选框。旧的方法是选择输入并检查它们是否被检查，现代方式，只需使用选择器来获取已检查的输入。

var oldWay = document.getElementById("myDiv").getElementsByTagName("input");
for (var i=0; i<oldWay.length; i++) {
  console.log(oldWay[i].checked)
}

var modernWay = document.querySelectorAll("#myDiv input:checked")
console.log(modernWay)

<div id="myDiv">
  <input type="checkbox" checked="checked" />  
  <input type="checkbox" checked="checked" />
  <input type="checkbox" />
  <input type="checkbox" />  
</div>

Answer 3

let checkboxes = [...document.querySelectorAll('input[type=checkbox]')]

checkboxes.forEach(checkbox => {
  if(checkbox.checked) {
    console.log('i am checked', checkbox)
  }
})

<div>
  <input type="checkbox" checked/>
  <input type="checkbox" />
  <input type="checkbox" checked/>
  <input type="checkbox" />
</div>

Answer 4

使用以下

var matches = [];
var searchEles = document.getElementById("myDiv").children;
for(var i = 0; i < searchEles.length; i++) {
  var elem = searchEles[i];
  
  if (elem.type == "checkbox" && elem.checked) {
    console.log(elem.id + " is Checked");
  }
}

<div id="myDiv">
  <input type="checkbox" id="chk1">
  <input type="checkbox" id="chk2" checked="checked">
  <input type="checkbox" id="chk3">
  <input type="checkbox" id="chk4" checked="checked">
</div>

Answer 5

c循环中的

for in是数组的索引，这就是当您尝试访问它时，checked属性未定义的原因。

以下代码适合您：

<div id="my-div">
  <input type="checkbox" />
  <input type="checkbox" checked="checked" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

JS：

let myDiv = document.getElementById('my-div');

for (let i = 0; i < myDiv.children.length; i++) {
  console.log(myDiv.children[i]);
  if (myDiv.children[i].nodeName.toLowerCase() === 'input') {
    console.log(myDiv.children[i].checked);
  }
}

Answer 6

无论如何，你的代码实际上非常接近。它应该是of而不是in。

＆＃13;

var e = document.getElementById("myDiv");
var c;

for (c of e.children) {
  if (c.checked) {
    console.log("winning")
  }
}

＆＃13;

<div id="myDiv">
  <input type="checkbox" />
  <input type="checkbox" checked />
  <input type="checkbox" checked />
  <input type="checkbox" />
  <input type="checkbox" checked />
</div>

＆＃13;

希望这有帮助

获取元素内的复选框

6 个答案: