获取复选框=已选中的表的列值

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

您可以循环遍历所有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)这里需要注意的一个重要事项是in的使用.querySelectorAll('td:not(:first-child)')。这样做是为了我们可以忽略每行中的第一列，因为这是一个复选框列，我们的逻辑不需要它的内容。

演示：

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 将是一个数组