书写一个后台管理中用到的全选反选功能。代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>全选反选插件</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

<div class="container">

    <div class="row6">

        <table class="table table-bordered">

            <thead>

                <tr>

                    <th style="width:250px;">

                        <button type="button" class="btn btn-success" id="check_all">全选</button>

                        <button type="button" class="btn btn-danger" id="check_others">反选</button>

                    </th>

                    <th>ID</th>

                    <th>name</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td><input type="checkbox" class="son_checkbox" ></td>

                    <td>1</td>

                    <td>张三</td>

                </tr>

                <tr>

                    <td><input type="checkbox" class="son_checkbox" ></td>

                    <td>2</td>

                    <td>李四</td>

                </tr>

                <tr>

                    <td><input type="checkbox" class="son_checkbox" ></td>

                    <td>3</td>

                    <td>王五</td>

                </tr>

                <tr>

                    <td><input type="checkbox" class="son_checkbox" ></td>

                    <td>4</td>

                    <td>赵六</td>

                </tr>

            </tbody>

        </table>

    </div>

</div>

<script>

    $(function(){

        //点击全选事件

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

            var text=$(this).text();

            var status;

            if(text=="全选")

            {

                status=true;

                text="取消全选";

            }

            else if(text=="取消全选")

            {

                status=false;

                text="全选";

            }else

            {

                return false;

            }

            $(".son_checkbox").prop("checked",status);//改变状态

            $(this).text(text);//设置文字

        });

        //点击反选事件

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

            //遍历所有选择框 然后反转状态

            $(".son_checkbox").each(function(){

                var now_status=$(this).prop("checked");//获取当前选择框是否选中

                now_status=!now_status;//反转状态

                $(this).prop("checked",now_status);//重新绑定状态

            });

        });

    });

</script>

</body>

</html>

效果图如下：

jquery 书写全选反选功能的更多相关文章

  1. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  2. jQuery实现全选反选功能

    废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...

  3. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  4. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  5. JS全选反选功能

    总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...

  6. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  7. JQuery实现列表中复选框全选反选功能封装

    我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...

  8. C# WinForm中实现CheckBox全选反选功能

    今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...

  9. jquery 实现全选反选

    jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...

随机推荐

  1. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  2. NET Core 整合Autofac和Castle

    NET Core 整合Autofac和Castle 阅读目录 前言: 1.ASP.NET Core中的Autofac 2.整合Castle的DynamicProxy 3.注意事项 回到目录 前言: 除 ...

  3. PBS

    赞同,已经试验成功.后来查手册: $man qdel-p 的功能是强制净化队列.这个 "p" 可能是  "purge" 的缩略形式 qsub,qdel,qmgr ...

  4. 移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览

    先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小 使用js框架是PhotoSwipe. PhotoSwipe是一个图片放大插件,兼容pc和移动端,经 ...

  5. uva_1422 Processor

    题目链接 题意: 有n个任务, 每个任务要在规定的时间[l, r]内完成, 工作量为 w, 每个任务可以分开完成. 求, 使得所有任务都完成的最大速度的最小值. 思路: 最大值最小问题, 二分. 因为 ...

  6. ubuntu 安装mysql及修改编码

    643  netstat -tap | grep mysql  645  apt-get install mysql-server mysql-client  646  netstat -tap | ...

  7. python和django的一些小技巧(locals()...)

    locals() 技巧: 思考一下我们对 current_datetime 的最后一次赋值: >>> import datetime >>> def current ...

  8. 把 Eclipse 中的工程 Push 到 Github（适用 Windows 平台）

    今天发现一小技巧,关于如何把Eclipse的某一个Existing project push 到github服务器. Eclipse 应该是 JavaEE 版本. 在project 右键 team, ...

  9. 配置PhpStorm调试PHP

    配置PhpStorm调试PHP 第一步:配置 XDebug 下载安装XDebug到本地环境(参考:Zend Studio 9.x + xampp + XDebug 调试环境安装详解),打开php.in ...

  10. C++静态变量对象的建立和删除，兼论MFC开始运行的起点（全局对象）

    看了不少C++书,当讲到静态变量的时候,总是以int成员来举例,是啊,这样很好理解.但是如果这个静态变量是一个对象行不行呢?不仅行,有时候还非常必要,而且别有洞天. 比如: // .h 文件 clas ...