代码:
<table class="table myTable table-hover"> <thead> <tr> <th> <div class="el-checkbox el-checkbox-green allCheck"> <label class="el-checkbox el-checkbox"><input type="checkbox" title="全选"> <span class="el-checkbox-style pull-right"></span> </label> </div> </th> </tr> </thead> <tbody class="case_list"> <tr> <td> <div class="el-checkbox el-checkbox-yellow"> <label class="el-checkbox el-checkbox"> <span class="margin-r"></span> <input type="checkbox" value=""> <span class="el-checkbox-style pull-right"></span> </label> </div> </td> </tr> <tr> <td> <div class="el-checkbox el-checkbox-yellow"> <label class="el-checkbox el-checkbox"> <span class="margin-r"></span> <input type="checkbox" value=""> <span class="el-checkbox-style pull-right"></span> </label> </div> </td> </tr> </tbody> </table>
jq代码:
// 全选,取消 $('.allCheck :checkbox').change(function () { // 当全选按钮被选中时,勾选列表中的所有的 if ($(this).prop('checked')) { $('.case_list :checkbox').prop('checked', true); } else { // 当再次点击全选按钮,表示取消全选 $('.case_list :checked').prop('checked', false) } });