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

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 => {&nbsp; chk.closest("tr").querySelectorAll('td:not(:first-child)').forEach((td, index) => {&nbsp; &nbsp; console.log(index, td.innerHTML)&nbsp; });}):not(:first-child)这里需要注意的一个重要事项是in的使用.querySelectorAll('td:not(:first-child)')。这样做是为了我们可以忽略每行中的第一列，因为这是一个复选框列，我们的逻辑不需要它的内容。演示：document.getElementById("btnTest").addEventListener("click", function() {&nbsp; var checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');&nbsp; checkedBoxes.forEach(chk => {&nbsp; &nbsp; chk.closest("tr").querySelectorAll('td:not(:first-child)').forEach((td, index) => {&nbsp; &nbsp; &nbsp; console.log(index, td.innerHTML)&nbsp; &nbsp; });&nbsp; })});<button id="btnTest">Get Value</button><table id="tblBrowse">&nbsp; <thead>&nbsp; &nbsp; <tr role="row">&nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="chkboxBrowseSelectAll" value="">&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; <th>Order No</th>&nbsp; &nbsp; &nbsp; <th>Ship To</th>&nbsp; &nbsp; &nbsp; <th>Sold To</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr role="row" class="odd">&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="sorting_1">1959-01</td>&nbsp; &nbsp; &nbsp; <td>123</td>&nbsp; &nbsp; &nbsp; <td>456</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <!-- And lots more of the same thing -->&nbsp; </tbody></table>

Answer 2

您可以为每个复选框赋予一个值并将其值存储在变量中var&nbsp;xyz=checkedBoxes.value;xyz 将是一个数组