Dart:如何遍历DOM元素

Question

我需要迭代我的HTML中的复选框,以便我可以检测已检查/未检查的状态,但无法找到如何执行此操作的示例.我希望它很快,我想到将元素引用存储在索引列表中可能会起作用,但我会以编程方式构建列表.

我是HTML,CSS和Dart的新手.

我的HTML:

<div id="check-boxes">
  <input id="B12" type="checkbox" checked="checked">
    <label for="B12">B12&nbsp;&nbsp;</label>
  <input id="B10" type="checkbox" checked="checked">
    <label for="B10">B10&nbsp;&nbsp;</label>
  <input id="B8" type="checkbox" checked="checked">
    <label for="B8">B8&nbsp;&nbsp;&nbsp;</label>
  <input id="BBW" type="checkbox" checked="checked">
    <label for="BBW">Wide&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
  <input id="freeze" type="checkbox">
    <label id="lblFreeze" for="freeze">Freeze</label>
 </div>

(实际上我不想包括最后一个复选框id = freeze.)

Answer 1

您可以使用 :

// retrieve checkboxes with a CSS selector
final checkBoxes = querySelectorAll('#check-boxes input[type=checkbox]');

// iterate over the checkboxes
checkBoxes.forEach((checkbox) {
  // do something
});

// iterate over the checked checkboxes
checkBoxes.where((e) => e.checked).forEach((checkbox) {
  // do something
});