<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>全选与反选</title>

        <!--此处引入的css与js需要更换成你本地的地址-->

        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />

        <script type="text/javascript" src="jquery-2.0.0/jquery.min.js"></script>

        <script>

            $(document).ready(function() {

                /*全选与反选按钮*/

                $("#all").click(function() {

                    var state = $("#all").prop("checked");

                    if(state == true) {

                        $("[name='option']").prop("checked", "checked");

                    } else {

                        $("[name='option']").prop("checked", "");

                    }

                });

                /*------------------------------------------------------------------------------------*/

                /*根据复选框是否全部选中来判断全选框是否选中*/

                //获取当前页面数据条数

                var options = $("[name='option']");

                //给每一个复选框加上click事件

                $("input[name='option']").click(function() {

                    //获取当前选中的复选框个数

                    var i = $("input[name='option']:checked");

                    //判断复选框选中个数是否等于当前页面数据条数

                    if(i.length == options.length) { //如果两者值相等那么全选按钮也会选中

                        $("#all").prop("checked", "checked");

                    } else { //当两者值不相等时全选框便不会显示选中

                        $("#all").prop("checked", "");

                    }

                });

            });

        </script>

    </head>

    <body>

        <div class="panel panel-default">

            <div class="panel-heading">数据字典</div>

            <div class="panel-body">

                <table class="table table-bordered table-hover">

                    <thead>

                        <tr class="active">

                            <th style="width: 2%;"><input type="checkbox" id="all"></th>

                            <th style="width: 28%;">字典ID</th>

                            <th style="width: 15%;">字典key</th>

                            <th style="width: 15%;">字典value</th>

                            <th style="width: 15%;">创建时间</th>

                            <th style="width: 25%;">编辑</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr>

                            <td><input type="checkbox" name="option"></td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>

                                <button type="button" class="btn btn-info btn-xs">编辑</button>

                                <button type="button" class="btn btn-danger btn-xs">删除</button>

                            </td>

                        </tr>

                        <tr>

                            <td><input type="checkbox" name="option"></td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>

                                <button type="button" class="btn btn-info btn-xs">编辑</button>

                                <button type="button" class="btn btn-danger btn-xs">删除</button>

                            </td>

                        </tr>

                        <tr>

                            <td><input type="checkbox" name="option"></td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>

                                <button type="button" class="btn btn-info btn-xs">编辑</button>

                                <button type="button" class="btn btn-danger btn-xs">删除</button>

                            </td>

                        </tr>

                        <tr>

                            <td><input type="checkbox" name="option"></td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>

                                <button type="button" class="btn btn-info btn-xs">编辑</button>

                                <button type="button" class="btn btn-danger btn-xs">删除</button>

                            </td>

                        </tr>

                    </tbody>

                </table>

                <nav aria-label="Page navigation" class="pull-right">

                    <ul class="pagination">

                        <li>

                            <a href="#" aria-label="Previous">

                                <span aria-hidden="true">&laquo;</span>

                            </a>

                        </li>

                        <li>

                            <a href="#">1</a>

                        </li>

                        <li>

                            <a href="#">2</a>

                        </li>

                        <li>

                            <a href="#">3</a>

                        </li>

                        <li>

                            <a href="#">4</a>

                        </li>

                        <li>

                            <a href="#">5</a>

                        </li>

                        <li>

                            <a href="#" aria-label="Next">

                                <span aria-hidden="true">&raquo;</span>

                            </a>

                        </li>

                    </ul>

                </nav>

            </div>

        </div>

    </body>

</html>

jquery简单实现复选框的全选与反选的更多相关文章

  1. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  2. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  3. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  4. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  5. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Vue复选框的全选

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  7. js复选框实现全选、全不选、反选

    复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...

  8. jQuery_完成复选框的全选与全不选

    别的不多说,直接上代码,用于完成复选框的全选与全不选. <!DOCTYPE html> <html> <head> <meta charset="U ...

  9. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  10. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

随机推荐

  1. 14 个你可能不知道的 JavaScript 调试技巧

    了解你的工具可以极大的帮助你完成任务.尽管 JavaScript 的调试非常麻烦,但在掌握了技巧 (tricks) 的情况下,你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bug ...

  2. 走近科学，探究阿里闲鱼团队通过数据提升Flutter体验的真相

    背景 闲鱼客户端的flutter页面已经服务上亿级用户,这个时候Flutter页面的用户体验尤其重要,完善Flutter性能稳定性监控体系,可以及早发现线上性能问题,也可以作为用户体验提升的衡量标准. ...

  3. @topcoder - TCO19 Regional Wildcard Wildcard Round - D1L2@ Diophantine

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 令 p[] 为质数序列:p[0] = 2, p[1] = 3, ...

  4. Keycode对照表（键码对照表）

    https://segmentfault.com/a/1190000005828048 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S ...

  5. JSON解析的成长史——原来还可以这么简单

    本文系统介绍,JSON解析的成长史,未经允许,禁止转载. JSON是一种轻量级的数据格式,一般用于数据交互 Android交互数据主要有两种方式:Json和Xml,Xml格式的数据量要比Json格式略 ...

  6. oracle函数 LENGTH(c1)

    [功能]返回字符串的长度; [说明]多字节符(汉字.全角符等),按1个字符计算 [参数]C1 字符串 [返回]数值型 [示例] SQL> select length('高乾竞'),length( ...

  7. The Top 50 Proprietary Programs that Drive You Crazy — and Their Open Source Alternatives

    The Top 50 Proprietary Programs that Drive You Crazy — and Their Open Source Alternatives 01 / 22 / ...

  8. laravel5.6之发送邮件

    https://blog.csdn.net/weixin_41767780/article/details/80918143 在注册的时候可以增加一个邮箱激活的功能,为防止自己忘记,记录一下实现邮箱激 ...

  9. [Pytorch]基于混和精度的模型加速

    这篇博客是在pytorch中基于apex使用混合精度加速的一个偏工程的描述,原理层面的解释并不是这篇博客的目的,不过在参考部分提供了非常有价值的资料,可以进一步研究. 一个关键原则:“仅仅在权重更新的 ...

  10. 利用 jquery 获取某个元素下的所有图片并改变其属性

    HTML代码 <div id="mochu"> <p>内容....<./p> <p><img src="xxxx.p ...