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

最新推荐文章于 2023-10-14 21:05:22 发布

Rogue_knight

最新推荐文章于 2023-10-14 21:05:22 发布

阅读量476

点赞数

分类专栏：学习文章标签： jquery checkbox

本文链接：https://blog.csdn.net/baidu_33621693/article/details/51768029

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图这里写图片描述
将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>

Rogue_knight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现表格的checkbox全选/取消全选

效果图在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="t
复制链接

扫一扫