<!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. jQuery简介,安装

    什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery库包含以下功能: HT ...

  2. android去掉layout顶部的阴影（状态栏下边的阴影）

    http://blog.csdn.net/kepoon/article/details/7207100

  3. cume_dist()，名次分析——-最大排名/总个数

    函数:cume_dist() over(order by id) select id,area,score, cume_dist() over(order by id) a, --按ID最大排名/总个 ...

  4. QT 开发ros gui过程中遇到：error: catkin_package() include dir 'include' does not exist relative to '/home/jun/catkin_ws/src/qt_ros_test' /opt/ros/kinetic/share/catkin/cmake/catkin_package.cmake:102 (_catkin_p

    这是因为在ros工作空间的包中没有include文件夹造成的,所以在该路径下创建include的文件夹,问题就解决了.

  5. 知识点补充,set集合,深浅copy

    一:对之前知识点的补充 1;字符串(str)中的join方法.把列表转换成字符串 2;列表list[ ]和字典dic{ }在循环过程中不能字节删除.需要把要删除的内容记录在新列表中.然后在循环新列表, ...

  6. HZOJ 那一天她离我而去

    一个数据水到不行的题,各路大佬用各种方法A掉了这个题(比如A*,最短路,dfs……). 这里只说一下我的暴力和被碾压的正解. 暴力AC系列: 要找过1点的最小环,那么这个环可以拆成两部分,与1相连的两 ...

  7. Android教程 -09 数据的持久化存储

    视频为本篇播客知识点讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷 任何一个程序其实说白了就是在不停地和数据打交道,数据持久化就是指将那些内存中的瞬时数据保存到存储设备中,保证及时手机关机的情况下 ...

  8. PHP调用纯真IP数据库返回具体地址

    function convertip($ip) { $ip1num = 0; $ip2num = 0; $ipAddr1 =""; $ipAddr2 =""; ...

  9. 实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

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

  10. hdu 4146 Flip Game

    Flip Game Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...