原生全选多选table表格实现

学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕 ~~，谢谢大家⭐️⭐️⭐️~

不用框架手写全选多选表格操作

代码如下：

html部分

<table class="table table-bordered">
        <thead class="aa">
                <tr>
                        <th>
                            <input type="checkbox" id="selectAll" />
                        </th>
                        <th>街道</th>
                        <th>小区</th>
                        <th>楼号</th>
                        <th>单元</th>
                        <th>门牌号</th>
                        <th>二维码</th>
                        <th>发卡时间</th>
                </tr>
        </thead>
        <tbody id="tbodyss">
                <tr>
                        <th>
                            <input type="checkbox" name="check" />
                        </th>
                        <td>知春路</td>
                        <td>世纪花园</td>
                        <td>1</td>
                        <td>1</td>
                        <td>101</td>
                        <td>150329002111111111111111111111111111111111842997</td>
                        <td>2019-7-31 </td>
                </tr>
                <tr>
                        <th>
                            <input type="checkbox" name="check" />
                        </th>
                        <td>知春路</td>
                        <td>世纪花园</td>
                        <td>1</td>
                        <td>1</td>
                        <td>101</td>
                        <td>150329002842997</td>
                        <td>2019-7-31 </td>
                </tr>
                <tr>
                        <th>
                            <input type="checkbox" name="check" />
                        </th>
                        <td>知春路</td>
                        <td>世纪花园</td>
                        <td>1</td>
                        <td>1</td>
                        <td>101</td>
                        <td>150329002842997</td>
                        <td>2019-7-31 </td>
                </tr>
        </tbody>
</table>

css部分

table thead tr th {
    border-bottom: 0 !important;
}

.table {
    margin-top: 20px;
    width: 80%;
    margin-left: 20px;
}
table tr, th, td {
    text-align: center;
}

js部分

$(function(){
        var selectAll=$("#selectAll")
        selectAll.click(function(){
                if (selectAll.prop("checked") == true) {
                    // 上面的复选框已被选中
                    $(":checkbox[name='check']").prop("checked", true);
                } else {
                    // 上面的复选框没被选中
                    $(":checkbox[name='check']").prop("checked", false);
                }
        })
        $("#tbodyss :input").click(function(){
                //获取复选框的个数
                var length1=$("#tbodyss :input").length
                //获取选中的复选框的个数
                var length2=$("#tbodyss :checked").length
                if(length1 == length2){
                        $("#selectAll").prop("checked",true);
                }else{
                        $("#selectAll").prop("checked",false);
                }
        })

})

效果图：

谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕