使用forEach循环从元素获取ID

Question

我正在使用foreach循环遍历网格数据源视图的数组，但是不知道如何从列中获取元素的ID。该元素是一个div和一个输入，我不知道如何从输入中获取ID。

返回的element.Option是

<div class="checkbox" style="margin:0">
    <input id="428" checked="" type="checkbox" data-size="mini" data-on="Yes" data-off="No">
</div>

我正在遍历ds

ds.forEach(function (element) {
    // How can I get the id of the input
    let me = document.getElementById(element.Option.id).checked;
    ...

});

编辑 这就是每个元素的确切含义（不同数据，相同结构除外）

$(document).ready(function() {

  $('#btn').on('click', function() {
    SaveHideColumnPreferences();
  });

  $("#HideColumnGrid").kendoGrid({
    //height: $('#HideColumnsWrapper').height(),
    columns: [{
        field: "Columns",
        title: "Columns"
      },
      {
        field: "Options",
        title: "Options"
      }
    ]
  });
  InitializaHideColumnSwitches();
});

function InitializaHideColumnSwitches() {
  $('#428').bootstrapToggle('off');
  $('#429').bootstrapToggle('off');
  $('#430').bootstrapToggle('off');
}

function SaveHideColumnPreferences() {
  let updatedHideColumn = [];
  let ds = $('#HideColumnGrid').data('kendoGrid').dataSource.view();

  ds.forEach(function(element) {
    let me = document.getElementById(element.PKID).checked;
    //const inputElement = element.Option.firstElementChild;
    //const id = inputElement.id; // get the id if you need it
    //let me = inputElement.checked;

    let isChecked;
    if (me) isChecked = 1;
    else isChecked = 0;

    updatedHideColumn.push(element.id, isChecked);

  });

  updatedHideColumn.forEach(function(e) {
    console.log(e);
  });
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<table id="HideColumnGrid">
  <colgroup>
    <col style="width:100px" />
    <col style="width:150px" />
  </colgroup>
  <thead>
    <tr>
      <th data-field="pref">Columns</th>
      <th>Option</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item Row Number</td>
      <td>
        <div class="checkbox" style="margin:0">
          <input id="428" checked type="checkbox" data-size="mini" data-on="Yes" data-off="No">
        </div>
      </td>
    </tr>
    <tr>
      <td>Area</td>
      <td>
        <div class="checkbox" style="margin:0">
          <input id="429" checked type="checkbox" data-size="mini" data-on="Yes" data-off="No">
        </div>
      </td>
    </tr>
    <tr>
      <td>Prompt</td>
      <td>
        <div class="checkbox" style="margin:0">
          <input id="430" checked type="checkbox" data-size="mini" data-on="Yes" data-off="No">
        </div>
      </td>
    </tr>

  </tbody>
</table>
<button id='btn' class='btn btn-default'>Get </button>

Answer 1

我的答案是建立在其他答案之上的，但是采取的方法是不假设每个<div class="checkbox">内只有1个输入

var ds = document.getElementsByClassName('checkbox')

for (var i = 0; i < ds.length; i++) {
  var inputs = ds[i].getElementsByTagName('input');
  
  for (var j = 0; j < inputs.length; j++) {
    console.log(`Input id: ${inputs[j].id}`)
    console.log(`Input checked: ${inputs[j].checked}`)
  }
}

<div class="checkbox" style="margin:0">
    <input id="428" type="checkbox">428<br>
    <input id="429" type="checkbox" checked>429
</div>
<div class="checkbox" style="margin:0">
    <input id="430" type="checkbox" checked>430
</div>