Получить значения столбца для таблицы, где флажок = выбран

Question

У меня есть таблица с флажком для каждой строки. Где строка выбрана, я хотел бы получить значение столбцов этой строки.

<table id="tblBrowse">
    <thead>
        <tr role="row">
            <th>
                <input type="checkbox" id="chkboxBrowseSelectAll" value="">
            </th>
            <th>Order No</th>
            <th>Ship To</th>
            <th>Sold To</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="odd">
            <td>
                <input type="checkbox">
            </td>
            <td class="sorting_1">1959-01</td>
            <td>123</td>
            <td>456</td>
        </tr>
        <!-- And lots more of the same thing -->
    </tbody>
</table>

Я могу получить флажки, которые отмечены, но как мне получить значение 123 и 456?

$('#btnTest').click(function () {
    var checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
    // Where do I go from here?
});

Я могу использовать jQuery или обычный JS, но должен быть совместим с IE.

Answer 1

Вы можете l oop через все checkedBoxes с помощью метода .forEach(), затем с помощью .closest("tr") найти ближайшую строку таблицы к этому флажку и затем получить значение столбцов этой строки.

var checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
checkedBoxes.forEach(chk => {
  chk.closest("tr").querySelectorAll('td:not(:first-child)').forEach((td, index) => {
    console.log(index, td.innerHTML)
  });
})

Здесь важно отметить использование :not(:first-child) в .querySelectorAll('td:not(:first-child)'). Это сделано для того, чтобы мы могли игнорировать первый столбец в каждой строке, так как это столбец флажка, и нам не нужно его содержимое для нашей логики c.

Демо:

document.getElementById("btnTest").addEventListener("click", function() {
  var checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
  checkedBoxes.forEach(chk => {
    chk.closest("tr").querySelectorAll('td:not(:first-child)').forEach((td, index) => {
      console.log(index, td.innerHTML)
    });
  })
});

<button id="btnTest">Get Value</button>
<table id="tblBrowse">
  <thead>
    <tr role="row">
      <th>
        <input type="checkbox" id="chkboxBrowseSelectAll" value="">
      </th>
      <th>Order No</th>
      <th>Ship To</th>
      <th>Sold To</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td>
        <input type="checkbox">
      </td>
      <td class="sorting_1">1959-01</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <!-- And lots more of the same thing -->
  </tbody>
</table>

Answer 2

Вы можете присвоить значение каждому флажку и сохранить его значение в переменной

var xyz=checkedBoxes.value;

xyz будет массивом