Как я могу получить значение переключателя внутри таблицы визуализации Google

Question

У меня есть таблица, которую я строю, используя обертку диаграммы, следующим образом:

var rightWrapper;
function drawVisualization() {
  rightWrapper = new google.visualization.ChartWrapper({
  "chartType": "Table",
  'dataSourceUrl':'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
  'containerId':'target_table_div',
  'query':'SELECT A,B,C,D',
  'options': { 'width': 700, 'height': 500, 'allowHtml': true }
  });

  google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);

  rightWrapper.draw();

  function onRightReady() {
    google.visualization.events.addListener(rightWrapper.getChart(), 'select', rightSelectionHandler);
  }

  function rightSelectionHandler() {
    var selection = rightWrapper.getChart().getSelection();
    if (selection.length == 1) {
      var item = selection[0];
      if (item.row != null) {
        alert("selected row " + item.row);
        var value = (rightWrapper.getSnapshot().getDataTable().getValue(item.row,3));
        alert(value);
      }
    } 
  }
}

И в этом столбце 3 у меня есть html для создания переключателей.К сожалению, фактический html хранится, и у меня, похоже, нет способа опроса, чтобы выяснить, какая радио-кнопка теперь проверена (getValue, перечисленный в коде выше, всегда показывает мне только HTML, который использовался для построения радиокнопки, а не какая из них сейчас "проверена").

К сожалению, кажется, что любые щелчки внутри этой таблицы должны быть уловлены выбранным слушателем, и выбранный слушатель не передает никакой информации за пределы выбранной строки и столбца.Я попытался встроить функции изменения и щелчка, а также переключил s на своих переключателях.Например:

$("#radio").click(function(){  //also tried with .change
  alert("working");
});

Это никогда не срабатывает, даже если я отключаю свой первоначальный слушатель.

Итак, как я могу узнать, какую радио-кнопку выбрал мой пользователь?

Примечание. Мне нужны радиокнопки внутри таблицы, поскольку каждая строка таблицы имеет свои радиокнопки, чтобы предоставить мне различную информацию о каждом из них.

Answer 1

вам не нужна форма, вам просто нужно дождаться события 'ready' графика,
, прежде чем назначить событие изменения.

см. Следующий рабочий фрагмент,
выберите радио, чтобы увидеть имя и значение ...

google.charts.load('current', {
  packages: ['controls', 'table']
}).then(function () {
  var rightWrapper = new google.visualization.ChartWrapper({
    chartType: 'Table',
    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
    containerId: 'target_table_div',
    query: 'SELECT A,B,C,D',
    options: { 'width': 700, 'height': 500, 'allowHtml': true }
  });

  google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);

  rightWrapper.draw();

  function onRightReady() {
    $('input[type="radio"]').on('change', calcForm2);
  }
});

function calcForm2(sender) {
  console.log(sender.target.name, sender.target.value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="target_table_div"></div>

Answer 2

Я понял что-то, что работает

Я могу добавить форму вокруг своих переключателей с кодом event.preventdefault и вызвать функцию:

<form name="myForm" onchange="event.preventDefault(); calcForm2(this);">...radiobuttons...</form>

Затем в своей функции я делаювсе, что я хочу с "этим".Он выглядит как «имя = значение», поэтому его довольно легко разделить и проанализировать.