你如何遍历Div中的每个Checkbox？ （镖）

Question

我的html中有一个div：

<div id="list_container_id"></div>

我通过dart

添加了Checkbox

CheckboxInputElement cie = new CheckboxInputElement();
LabelElement label = new LabelElement();
    cie.id="checkboxid_"+asdf;//unique id
    label.htmlFor = 'checkboxid_'+asdf;//bind Label to checkbox
    label.text = asdf;
    list_container.children.add(cie);
    list_container.children.add(label);
    list_container.children.add(new Element.html("<br>"));//linebreak after the checkbox

稍后，我想获得一个列表，其中包含按钮单击时选中的复选框的所有值。以下代码发生在Click：

List list = [];    
for (CheckboxInputElement elem in list_container.children){
        if(elem.checked){
          list.add(elem.value);
        }
      }

据我所知，for循环通过list_container中的每个Checkbox，但由于某种原因，它在到达标签时会抛出Error：

  

突破异常：类型'LabelElement'不是类型的子类型   'elem'的'checkboxInputElement'。

当我清楚地说elem应该是CheckboxInputElement时，我不明白为什么for循环甚至会困扰标签。怎样才能做到这一点？

Answer 1

你没有声明它只应该返回CheckboxInputElement你声明持有循环中处理的值的变量应该只保留CheckboxInputElement，但是循环会分配它遇到的每个元素。

这样您只能获得CheckboxInputElement

List list = [];    
for (var elem in list_container.children.where((e) => e is CheckboxInputElement)){
  if(elem.checked){
    list.add(elem.value);
  }
}

或

list.addAll(list_container.children
  .where((e) => e is CheckboxInputElement && e.checked)
  .map((e) => e.value));

或

list.addAll(querySelectorAll('#list_container_id input[type="checkbox"]')
  .where((e) => e is CheckboxInputElement && e.checked)
  .map((e) => e.value));

Answer 2

querySelector("#list_container_id")
    .querySelectorAll("input[type=checkbox]")
        .forEach((CheckboxInputElement e) {
            /* do work */ 
         });