全选全不选案例table表格

全选全不选案例table表格

案例一纯table表格

<table class="table table-bordered">
            <thead class="aa">
                <tr>
                    <th>品类th>
                    <th>计量单位th>
                    <th>积分th>
                    <th>最后修改时间th>
                    <th>修改人th>
                    <th>操作th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>废纸td>
                    <td>kgtd>
                    <td>1td>
                    <td>td>
                    <td>td>
                    <td>
                        <span class="glyphicon glyphicon-credit-card sp">span ><span class="sp"> 查看span>
                        <span class="glyphicon glyphicon-pencil sp">span><span class="sp"> 编辑    span>
                        <span class="glyphicon glyphicon-trash sp">span><span class="sp"> 删除    span>
                    td>
                tr>
                <tr>
                    <td>塑料瓶td>
                    <td>个td>
                    <td>1td>
                    <td>td>
                    <td>td>
                    <td>
                        <span class="glyphicon glyphicon-credit-card sp">span ><span class="sp"> 查看span>
                        <span class="glyphicon glyphicon-pencil sp">span><span class="sp"> 编辑    span>
                        <span class="glyphicon glyphicon-trash sp">span><span class="sp"> 删除    span>
                    td>
                tr>
                <tr>
                    <td>厨余td>
                    <td>次td>
                    <td>1td>
                    <td>td>
                    <td>td>
                    <td>
                        <span class="glyphicon glyphicon-credit-card sp">span ><span class="sp"> 查看span>
                        <span class="glyphicon glyphicon-pencil sp">span><span class="sp"> 编辑    span>
                        <span class="glyphicon glyphicon-trash sp">span><span class="sp"> 删除    span>
                    td>
                tr>
            tbody>

        table>

图一图二如下所示

 

 

 案例二table表格及全选全不选

<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>1td>
                    <td>1td>
                    <td>101td>
                    <td>150329002842997td>
                    <td>2019-7-31 td>
                tr>
                <tr>
                    <th>
                        <input type="checkbox" name="check" />
                    th>
                    <td>知春路td>
                    <td>世纪花园td>
                    <td>1td>
                    <td>1td>
                    <td>101td>
                    <td>150329002842997td>
                    <td>2019-7-31 td>
                tr>
                <tr>
                    <th>
                        <input type="checkbox" name="check" />
                    th>
                    <td>知春路td>
                    <td>世纪花园td>
                    <td>1td>
                    <td>1td>
                    <td>101td>
                    <td>150329002842997td>
                    <td>2019-7-31 td>
                tr>
            tbody>
        table>

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);
                }
            })
            
        })