How to get current value of header cell? (incl. nested headers)

Question

I have a handsontable, where some of the headers are checkboxes, and some of them are select boxes.

How do you access the header to check the value of a select/checkbox inside the header cell?

JSFiddle (with nested headers - same as my project): http://jsfiddle.net/Lmh50uwu/

I'd like to access the value of mybox and myselect

$("#mybox") or$("#myselect") don't work.

I'd like to be able to check the value of myselect and mybox at any point after the DOM load.

document.addEventListener("DOMContentLoaded", function() {

  var example1 = document.getElementById('example1');
  
  var hot = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(5,10),
    colHeaders: true,
    rowHeaders: true,
    nestedHeaders: [
      ['<input type="checkbox" id="mybox">', {label: 'B', colspan: 8}, 'C'],
      ['<select id="myselect" name="menu" class="selectpicker"><option value="LVW">LVW</option><option value="SIM">SIM</option></select>', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
      ['H', {label: 'I', colspan: 2}, {label: 'J', colspan: 2}, {label: 'K', colspan: 2}, {label: 'L', colspan: 2}, 'M'],
      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
    ]
  });
  
  
});

$("#mybox").remove();

console.log("test")
var elem = document.getElementById("myselect");
// console.log(elem.value); // elem is null here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://docs.handsontable.com/pro/1.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

EDIT: updated: http://jsfiddle.net/Lmh50uwu/2/

EDIT: added the snippet into my post, but can't test because my company blocks access to it.

Answer 1

Turns out that custom HTML elements in row & column headers need to be identified by class name, not by id. This is because row and column headers are duplicated in the DOM tree and id attribute must be unique.

(See this link: http://bollwyvl.github.io/jquery-handsontable/demo/renderers_html.html)

Solution:

use <input type="checkbox" class="mybox"> together with getter $(".mybox")[1].checked

instead of

use <input type="checkbox" id="mybox"> together with getter $("#mybox").checked