<!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. du,df区别

    1.记住命令 du:disk Usage -h, --human-readable print sizes in human readable format df:disk free 2.区别 du ...

  2. 二 virtualenv与virtualenvwrapper

    https://www.cnblogs.com/pyyu/p/9015317.html 一  virtualenv 1.下载virtualenvpip3 install -i https://pypi ...

  3. @NOIP2018 - D2T1@ 旅行

    目录 @题目描述@ @题解@ @代码@ @题目描述@ 小 Y 是一个爱好旅行的 OIer.她来到 X 国,打算将各个城市都玩一遍. 小Y了解到, X国的 n 个城市之间有 m 条双向道路.每条双向道路 ...

  4. python环境测试MySQLdb、DBUtil、sqlobject性能

    python环境测试MySQLdb.DBUtil.sqlobject性能 首先介绍下MySQLdb.DBUtil.sqlobject: (1)MySQLdb 是用于Python连接Mysql数据库的接 ...

  5. Redis源码解析：04字典的遍历dictScan

    dict.c中的dictScan函数,用来遍历字典,迭代其中的每个元素.该函数使用的算法非常精妙!!!所以必须记录一下. 遍历一个稳定的字典,当然不是什么难事,但Redis中的字典因为有rehash的 ...

  6. python基础之逻辑题(2)

    python基础之逻辑题(2) 1.若k为整数,下列while循环执行的次数为? 2.请输出正确结果-----numbers? 3.求结果-----math?   4.求结果-----sum? 5.输 ...

  7. Jquery FormData文件异步上传 快速指南

    网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...

  8. oracle优化EXPORT和IMPORT

    使用较大的BUFFER(比如10MB , 10,240,000)可以提高EXPORT和IMPORT的速度. ORACLE将尽可能地获取你所指定的内存大小,即使在内存不满足,也不会报错.这个值至少要和表 ...

  9. H3C 轮询DCC和共享DCC

  10. vue用法父组件调用子组件方法--->$refs

    vue下载excel模板(放入弹框独立出来)后再导入表格 子组件 <el-dialog title="导入" :visible.sync="dialogVisibl ...