使用jquery获取选中checkBox的同行数据

头秃小可爱

于 2020-12-03 16:46:27 发布

阅读量1.2k

点赞数 3

分类专栏：杂记文章标签： js html checkbox jquery html5

本文链接：https://blog.csdn.net/qq_36990177/article/details/110545096

版权

杂记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

获取选中checkBox 所在行的数据。

这里以获取第三列和第四列数据为例子（除去checkBox列），会获取一列数据，就会获取一整行了。

实例图：

该页面代码：

<html>
<body>
<table border="1">
    <tr>
        <td>
            <div>
                <input type="checkbox" id="aa" value="a" name="bid_toHang">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="1">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="2">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="3">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="4">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="checkbox" id="bb" value="a" name="bid_toHang">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="5">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="6">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="7">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="8">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="checkbox" id="cc" value="a" name="bid_toHang">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="9">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="10">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="11">
            </div>
        </td>
        <td>
            <div>
                <input type="text" value="12">
            </div>
        </td>
    </tr>
</table>
<input type="button" value="打印" onclick="printSelected()"/>
<p>打印选中数据：</p>
<p id="printArea"></p>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    function printSelected(){
        var lineNum = $("input[name='bid_toHang']:checked").length; // 一共选中几行
        var looking_list_arr = $("input[name='bid_toHang']:checked").parent().parent().nextAll();// 获取选中行的全部字段数据
        var size = 4; // 每行除checkBox外，共几格
        for(var i =0;i< lineNum;i++){
            var arr = looking_list_arr.slice(i*size,(size* (i + 1)));
            var second = arr.eq(2).find('input').val(); // 想获取第计列的数据，就更换为其下标
            var third = arr.eq(3).find('input').val();
            
            // 下面代码只是为了在页面输出数据，无实际作用。
            $('#printArea').append(second);
            $('#printArea').append('\r\r');
            $('#printArea').append(third);
            $('#printArea').append('<br/>');
        }
    }
</script>

效果图：

（获取第三列和第四列数据为例子）