Getting id from element with forEach loop

Question

I am using a foreach loop to loop through an array of a grid datasource view and don't know how to get the Id of an element from a column. The element is a div and an input and I don't know how to get the id from the input.

The element.Option being returned is

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

and I am looping through the ds

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

});

EDIT Here is exactly what each element will be (other than different data, same structure)

$(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

My answer builds on top of others, but take the approach of not assuming you only have 1 input inside each <div class="checkbox">

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>