JQ实现全选、全不选

代码:

   <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)
            }
        });
原文地址:https://www.cnblogs.com/wanghuijie1/p/11859335.html