jquery实现复选框的全选与取消全选功能

HTML代码

首先创建一个表格：

<table class="table table-bordered table-hover">
                <tr>
                    <th><input type="checkbox" id="all"></th>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>价格</th>
                    <th>介绍</th>
                    <th>封面</th>
                    <th>库存</th>
                    <th>状态</th>
                    <th>上货时间</th>
                </tr>
                <tr v-for="(pros,i) in product">
                    <td><input type="checkbox" name="sub"></td>
                    <td>{{pros.cid}}</td>
                    <td>{{pros.tname}}</td>
                    <td>{{pros.price}}元</td>
                    <td>{{pros.details}}</td>
                    <td>{{pros.picture}}</td>
                    <td>{{pros.stock}}</td>
                    <td>{{pros.states}}</td>
                    <td>{{pros.add_date}}</td>
                </tr>
            </table>

jquery代码：

// prop () 函数用于 设置或返回当前jQuery对象所匹配的元素的属性值 。

// 第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素propertyName属性当前的值

// 这个函数的意思是动态点击全选按钮时，所有input名字为“sub”的元素选中状态为父元素的选中状态

 

$("#all").on('click',function() { $("input[name='sub']").prop("checked", this.checked); });

运行结果：