全选全不选案例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);

                }

            })

        })