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

运行结果：