zoukankan      html  css  js  c++  java
  • 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)
                }
            });
  • 相关阅读:
    ES6-11学习笔记--正则表达式的扩展
    ES6-11学习笔记--字符串的扩展
    ES6-11学习笔记--Map
    ES6-11学习笔记--Set
    ES6-11学习笔记--Symbol
    final
    MySQL
    爬虫1
    laravel
    HTML学习
  • 原文地址:https://www.cnblogs.com/wanghuijie1/p/11859335.html
Copyright © 2011-2022 走看看