jquery實現複選框的全選與取消全選功能
阿新 • • 發佈:2022-05-06
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); });
執行結果: