Getting id from element with forEach loop

up vote
0
down vote

favorite

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)
screenshot of element

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

edited Nov 19 at 14:39

asked Nov 19 at 0:42

Chris

1,06652157

1

What is element in your forEach loop?
– Phil
Nov 19 at 0:45

@Phil, the element is a row and Option is one of the columns
– Chris
Nov 19 at 0:48

That doesn't answer my question at all. What exactly is element and element.Option? What data types are they? How is ds created? What values are assigned to its items?
– Phil
Nov 19 at 2:57

@Phil, I'll post all code in the morning
– Chris
Nov 19 at 3:12

@Phil, I just added the code
– Chris
Nov 19 at 14:39

add a comment |

up vote
0
down vote

favorite

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)
screenshot of element

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

edited Nov 19 at 14:39

asked Nov 19 at 0:42

Chris

1,06652157

1

What is element in your forEach loop?
– Phil
Nov 19 at 0:45

@Phil, the element is a row and Option is one of the columns
– Chris
Nov 19 at 0:48

That doesn't answer my question at all. What exactly is element and element.Option? What data types are they? How is ds created? What values are assigned to its items?
– Phil
Nov 19 at 2:57

@Phil, I'll post all code in the morning
– Chris
Nov 19 at 3:12

@Phil, I just added the code
– Chris
Nov 19 at 14:39

add a comment |

up vote
0
down vote

favorite

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)
screenshot of element

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

edited Nov 19 at 14:39

asked Nov 19 at 0:42

Chris

1,06652157

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)
screenshot of element

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

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

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

javascript

edited Nov 19 at 14:39

asked Nov 19 at 0:42

Chris

1,06652157

edited Nov 19 at 14:39

asked Nov 19 at 0:42

Chris

1,06652157

edited Nov 19 at 14:39

asked Nov 19 at 0:42

Chris

1,06652157

asked Nov 19 at 0:42

Chris

1,06652157

asked Nov 19 at 0:42

Chris

1,06652157

1

What is element in your forEach loop?
– Phil
Nov 19 at 0:45

@Phil, the element is a row and Option is one of the columns
– Chris
Nov 19 at 0:48

That doesn't answer my question at all. What exactly is element and element.Option? What data types are they? How is ds created? What values are assigned to its items?
– Phil
Nov 19 at 2:57

@Phil, I'll post all code in the morning
– Chris
Nov 19 at 3:12

@Phil, I just added the code
– Chris
Nov 19 at 14:39

add a comment |

1

What is element in your forEach loop?
– Phil
Nov 19 at 0:45

@Phil, the element is a row and Option is one of the columns
– Chris
Nov 19 at 0:48

That doesn't answer my question at all. What exactly is element and element.Option? What data types are they? How is ds created? What values are assigned to its items?
– Phil
Nov 19 at 2:57

@Phil, I'll post all code in the morning
– Chris
Nov 19 at 3:12

@Phil, I just added the code
– Chris
Nov 19 at 14:39

What is element in your forEach loop?
– Phil
Nov 19 at 0:45

@Phil, the element is a row and Option is one of the columns
– Chris
Nov 19 at 0:48

That doesn't answer my question at all. What exactly is element and element.Option? What data types are they? How is ds created? What values are assigned to its items?
– Phil
Nov 19 at 2:57

@Phil, I'll post all code in the morning
– Chris
Nov 19 at 3:12

@Phil, I just added the code
– Chris
Nov 19 at 14:39

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

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>

answered Nov 19 at 1:36

AnonymousSB

83117

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53366945%2fgetting-id-from-element-with-foreach-loop%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

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>

answered Nov 19 at 1:36

AnonymousSB

83117

add a comment |

up vote
0
down vote

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>

answered Nov 19 at 1:36

AnonymousSB

83117

add a comment |

up vote
0
down vote

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>

answered Nov 19 at 1:36

AnonymousSB

83117

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>

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>

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>

answered Nov 19 at 1:36

AnonymousSB

83117

answered Nov 19 at 1:36

AnonymousSB

83117

answered Nov 19 at 1:36

AnonymousSB

83117

answered Nov 19 at 1:36

AnonymousSB

83117

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr