Jquery实现多个表格的全选复选框功能

再※见了＆单纯，！

已于 2022-04-16 19:46:22 修改

阅读量1.3k

点赞数

分类专栏： jquery 文章标签： jquery javascript css3

于 2022-03-17 13:51:38 首次发布

本文链接：https://blog.csdn.net/qq_44732752/article/details/123546487

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用HTML、CSS和JavaScript实现表格中的复选框全选和单选功能。当点击全选按钮时，所有对应类型的复选框会被选中或取消；点击单个复选框时，只改变该选项状态；点击表格行时，会切换该行复选框的选择状态，并同步全选按钮的状态。

摘要由CSDN通过智能技术生成

在这里插入图片描述实现多个表格的复选框功能，

HTML+CSS部分

<style>
    .kctc-table tbody {
        width: 1180px;
        background-color: #fff;
    }

    .kctc-table tbody tr {
        width: 1180px;
        display: flex;
    }

    .kctc-table thead {
        width: 1180px;
        display: flex;
    }

    .kctc-table thead tr {
        width: 1180px;
        display: flex;
    }

    .kctc-table th,
    td {
        flex: 1;
        border-bottom: 1px solid black;
        min-height: 40px;
        line-height: 40px;
        font-size: 15px;
        color: #666;
    }
</style>
<table class="kctc-table kcnr" style="margin:0 auto 18px;text-align: center;">
    <thead>
        <th><input type="checkbox" class="checkAll" id="typeid-1" data-typeid="1">全选</th>
        <th>名称</th>
    </thead>
    <tbody id="type-1" data-typeid="1">
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>
                2021年10月自考03708中国近代史纲要
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>
                2021年10月自考03708中国近代史纲要
            </td>
        </tr>
    </tbody>
</table>

JS部分

	$(function () {
		//点击全选按钮
        $(".checkall").on('click', function () {
        	//获取到当前全选按钮的data-typeid
            let id = $(this).attr("data-typeid");
            //将获取到的data-typeid拼接给type-,并找到下面所有的复选框将其状态改变
            $("#type-" + id).find("input[type=checkbox]").prop('checked', this.checked);
        })
        //点击复选框单选
        $('.check').on('click',function () {
       		//获取当前点击的check父级的data-typeid
            let id = $(this).parents("tbody").attr("data-typeid");
            common(id);
            event.stopPropagation();
        })
        //点击一行选中复选框
        $('tr').click(function () {
        	//获取当前点击的tr父级的data-typeid
            let id = $(this).parents("tbody").attr("data-typeid");
            //获取当前点击tr里面复选框的状态
            var isChecked = $(this).find("input[type=checkbox]").prop('checked');
            //改变当前点击tr里面复选框的状态
            $(this).find("input[type=checkbox]").prop('checked', !isChecked);
            common(id);
        })
        function common (id){
        	//获取当前$("#type-" + id)下复选框的长度
            let len = $("#type-" + id).find("input[type=checkbox]").length;
            //获取当前$("#type-" + id)下复选框选中的长度
            let checked_len = $("#type-" + id).find("input[type=checkbox]:checked").length;
            if (len == checked_len) {
                $("#typeid-" + id).prop('checked', true);
            } else {
                $("#typeid-" + id).prop('checked', false);
            }
        }
    })