<!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. 【C++】STL ：栈

    c++stack(堆栈)是一个容器的改编,它实现了一个先进后出的数据结构(FILO) 使用该容器时需要包含#include<stack>头文件: 定义stack对象的示例代码如下: sta ...

  2. spring data jpa使用别名--as

    使用jpa进行两表联查时总会有字段名相同,所以需要用别名进行区分: 例子: department表同时包含子级id和父级id: 查询语句为: select d.id,d.name,d.descript ...

  3. js+canvas制作前端验证码

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

  4. 像Google一样构建机器学习系统3 - 利用MPIJob运行ResNet101

    本系列将利用阿里云容器服务,帮助您上手Kubeflow Pipelines. 第一篇:在阿里云上搭建Kubeflow Pipelines 第二篇:开发你的机器学习工作流 第三篇:利用MPIJob运行R ...

  5. PAN-OS 6.1 Open Source Software (OSS) Listing

    https://www.paloaltonetworks.com/documentation/oss-listings/oss-listings/pan-os-oss-listings/pan-os- ...

  6. 分布式TensorFlow集群local server使用详解

    通过local server理解分布式TensorFlow集群的应用与实现. ​​简介 TensorFlow从0.8版本开始,支持分布式集群,并且自带了local server方便测试. Local ...

  7. 嵌套app ，的h5分支 项目 （分享，保存图片，返回app）

    function callAppBridge(func, argObj) {   const app = window.webkit || window.app;   const args = typ ...

  8. mysql聚合函数和分组

    文章实例的数据表,来自上一篇博客<mysql简单查询>:http://blog.csdn.net/zuiwuyuan/article/details/39349611 一. 聚合函数 聚合 ...

  9. [转载] linux下tar命令解压到指定的目录

    参考 http://blog.sina.com.cn/s/blog_62449fcf0100nfar.html linux下tar命令解压到指定的目录 :   #tar zxvf /bbs.tar.z ...

  10. 手把手教你用Python实现自动特征工程

    任何参与过机器学习比赛的人,都能深深体会特征工程在构建机器学习模型中的重要性,它决定了你在比赛排行榜中的位置. 特征工程具有强大的潜力,但是手动操作是个缓慢且艰巨的过程.Prateek Joshi,是 ...