<!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. oralce GROUPING SETS

    select id,area,stu_type,sum(score) score from students group by grouping sets((id,area,stu_type),(id ...

  2. Java练习 SDUT-1119_输入数字星期，输出英文(switch语句)

    C语言实验--输入数字星期,输出英文(switch语句) Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 从键盘上输入数 ...

  3. 02docker简单使用和配置(网络、存储和Hub)

    四:网络 1:命名容器 在各种docker命令中,可以通过名字中找到对应的容器.之前创建的容器都是由docker自动命名的,可以在docker  run中,通过--name参数指定容器的名字.比如: ...

  4. 60.0.1（64位）windows版 uploadify使用有问题

    http://mozilla.com.cn/thread-403024-1-1.html 60.0.1(64位)版,在使用uploadify插件,上传附件时,上传没有问题,可以成功,但执行上传成功后的 ...

  5. Python 官方文档：入门教程

    https://pythoncaff.com/docs/tutorial/3.7.0 官方入门教程,从这里开始你的 Python 之旅,将长久维护 基础信息 翻译说明 关于本教程 已完成 正文 1. ...

  6. Python两个字典键同值相加的几种方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Jerry_1126/article/de ...

  7. oracle函数 RPAD(c1,n[,c2])

    [功能]在字符串c1的右边用字符串c2填充,直到长度为n时为止 [参数]C1 字符串 n 追加后字符总长度 c2 追加字符串,默认为空格 [返回]字符型 [说明]如果c1长度大于n,则返回c1左边n个 ...

  8. 从 Spark 到 Kubernetes — MaxCompute 的云原生开源生态实践之路

    2019年5月14日,喜提浙江省科学技术进步一等奖的 MaxCompute 是阿里巴巴自研的 EB 级大数据计算平台.该平台依托阿里云飞天基础架构,是阿里巴巴在10年前做飞天系统的三大件之分布式计算部 ...

  9. HDU - 6534 Chika and Friendly Pairs

    这个题其实也是很简单的莫队,题目要求是给一个序列,询问l-r区间内部,找到有多少对答案满足 i < j 并且 | a[ i ] -a[ j ] | <=k 也就是有多少对,满足差值小于k的 ...

  10. LRJ-Example-06-12-Uva572

    #define _CRT_SECURE_NO_WARNINGS #include <cstdio> #include <cstring> #include <string ...