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

Answer 2

我会这样做

import 'dart:html';

void main (){

  //Get all checkboxes in a list
  var all_checkboxes = querySelectorAll('#check-boxes input[type="checkbox"]');
  //Loop through your list
  all_checkboxes.forEach((CheckboxInputElement el){
      //do any logic you want here
       if (el.checked == true){}
  });
}

Dart：如何遍历DOM元素

2 个答案: