jQuery实现表格的checkbox全选/取消全选

来源：互联网发布：青海师范大学网络教学编辑：程序博客网时间：2024/05/13 00:18
效果图这里写图片描述
将jquery.js文件放到项目中对应的位置即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gbk">        <title>员工列表</title>        <style type="text/css">table {    border: 1px solid black;    border-collapse: collapse;}table thead tr th {    border: 1px solid black;    padding: 3px;    backgroud-color: #cccddd;}table tbody tr td {    border: 1px solid black;    padding: 3px;}</style>    </head>    <script language="javascript" src="js/jquery-1.4.4.min.js"></script>    <script type="text/javascript">$(function() {    $("#all").click(function() {        if (this.checked) {            $('table input[type=checkbox]').attr('checked', true);        } else {            $('table input[type=checkbox]').attr('checked', false);        }    });});</script>    <body>        <center>            <h2>                <font color="blue">员工列表</font>            </h2>            <table cellspacing="1">                <thead>                    <tr>                        <th>                            <input type="checkbox" id="all" />                        </th>                        <th>                            编号                        </th>                        <th>                            姓名                        </th>                        <th>                            薪水                        </th>                        <th>                            年龄                        </th>                        <th>                            电话                        </th>                        <th>                            地址                        </th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>                            <input type="checkbox" />                        </td>                        <td>                            1                        </td>                        <td>                            sven                        </td>                        <td>                            8000                        </td>                        <td>                            24                        </td>                        <td>                            123456                        </td>                        <td>                            上海                        </td>                    </tr>                    <tr>                        <td>                            <input type="checkbox" />                        </td>                        <td>                            2                        </td>                        <td>                            luna                        </td>                        <td>                            10000                        </td>                        <td>                            26                        </td>                        <td>                            123456                        </td>                        <td>                            深圳                        </td>                    </tr>                </tbody>            </table>        </center>    </body></html>
0 0