Jquery实现全选中全不选中以及获取选中行的相关值

来源：互联网发布：近景摄影测量软件编辑：程序博客网时间：2024/05/21 11:23

全选全不选主要使用到了jquery的遍历。

获取选中值也是用到了当前元素与要获取值元素之间的关系（后代，同胞什么的）

下面为参考代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <script type="text/javascript" src="jquery-2.0.3.min.js"></script>    </head>    <body>        <table id="checkTable">            <tHead>                <tr>                    <td><input type="checkbox" name="selectAll"/></td>                    <td>ID</td>                </tr>            </tHead>            <tbody>                <tr>                    <td><input type="checkbox" name="select"/></td>                    <td>20160413</td>                </tr>                <tr>                    <td><input type="checkbox" name="select"/></td>                    <td>20160414</td>                </tr>                <tr>                    <td><input type="checkbox" name="select"/></td>                    <td>20160415</td>                </tr>            </tbody>        </table>        <input id="getCheckedIDs" type="button" value="获取选中的ID"/>    </body>    <script>        //全选中，全不选中        $('body').on('click', 'input[type=checkbox][name=selectAll]', function(){    var checkall = $(this);    if (checkall.is(':checked'))    {    $('#checkTable').find('input[type=checkbox][name=select]').prop('checked', true);    }    else    {    $('#checkTable').find('input[type=checkbox][name=select]').prop('checked', false);    }    });                //获取选中的ID值，以逗号连接        $('#getCheckedIDs').click(function(){            var chks = $('#checkTable').find('input[type=checkbox][name=select]:checked');    var devices = '';    for (var i = 0; i < chks.length; i++)    {    var chk = $(chks[i]);    if (devices.length > 0)    {    devices += ",";    }    devices += chk.parent().next().text();    }            alert("IDs:" + devices);        });    </script></html>

0 0