标签：selectAll checked prop 全选 全不选 table 复选框 nbsp

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

标签：selectAll,checked,prop,全选,全不选,table,复选框,nbsp
来源： https://www.cnblogs.com/vaelcy/p/11909586.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。