JQ实现表格全选、反选功能

下面代码是使用JQ,实现表格列表的全选和反选功能,实际较为简单,主要做为教学使用:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>表格全选 </title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <table class="table table-hover table-bordered">
            <tbody>
            <tr>
                <td>选择状态</td>
                <td>产品序号</td>
                <td>产品名称</td>
                <td>库存</td>
                <td>存放地</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="Alone" class="input-group td-list"/>
                </td>
                <td>1</td>
                <td>大米</td>
                <td>2000</td>
                <td>盘锦</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="Alone" class="input-group td-list"/>
                </td>
                <td>2</td>
                <td>玉米</td>
                <td>3232</td>
                <td>沈阳</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="Alone" class="input-group td-list"/>
                </td>
                <td>3</td>
                <td>猪肉</td>
                <td>23232323</td>
                <td>新民冷库</td>
            </tr>
            </tbody>
        </table>
        <div class="btn-group">
            <input type="checkbox" class="form-control" id="all">全选
            <input type="checkbox" class="form-control" id="reverse_election">全选
        </div>
    </div>
</div>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<script>
 $("#all").click(function () {
        var status = $(this).is(":checked");
 $(".td-list").prop("checked", status);
 });
 $("#reverse_election").click(function () {
        //更改成全选状态
 $(".td-list:checkbox").each(function () {
            //遍历所有复选框,然后取值进行 !非操作
 $(this).prop("checked", !$(this).prop("checked"));
 })
    });
</script>
</html>


喜欢就点个赞吧

发表评论

需要先登录,才能发表评论哦!登录

网友评论
暂无评论