全选全不选案例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>kg</td>
                    <td>1</td>
                    <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"> 编辑&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="glyphicon glyphicon-trash sp"></span><span class="sp"> 删除&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </td>
                </tr>
                <tr>
                    <td>塑料瓶</td>
                    <td>个</td>
                    <td>1</td>
                    <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"> 编辑&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="glyphicon glyphicon-trash sp"></span><span class="sp"> 删除&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </td>
                </tr>
                <tr>
                    <td>厨余</td>
                    <td>次</td>
                    <td>1</td>
                    <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"> 编辑&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="glyphicon glyphicon-trash sp"></span><span class="sp"> 删除&nbsp;&nbsp;&nbsp;&nbsp;</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>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>
                <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>

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