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

<!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. PHP构造函数的用法分析

    PHP构造函数的声明与其它操作的声明一样,只是其名称必须是__construct( ).这是PHP5中的变化,以前的版本中,构造函数的名称必须与类名相同,这种在PHP5中仍然可以用,但现在以经很少有人 ...

  2. ng表单验证，提交以后才显示错误

    只在提交表单后显示错误信息 有时候不想在用户正在输入的时候显示错误信息. 当前错误信息会在用户输入表单时立即显示. 由于Angular很棒的数据绑定特性,这是可以发生的. 因为所有的事务都可以在一瞬间 ...

  3. ARM 的Thumb状态测试

    作为一个使用ARM的学习者,有必要全面了解你的处理器内核.尽管有些内容可能在实际应用中用不到,但是“了解”还是很必要的.Thumb状态,是ARM的一个特色,但是你知道Thumb状态与ARM状态最大的区 ...

  4. NULL, nil, Nil详解

    原文地址:http://blog.csdn.net/wzzvictory/article/details/18413519    感谢原作者 作者:wangzz 原文地址:http://blog.cs ...

  5. App - 版本控制

    /**  版本判断 ***/ NSString *versionKey = @"CFBundleVersion"; // 上一次使用版本号(存储在沙盒中的版本号) NSString ...

  6. MAC安装XAMPP的出现无法打开Apache server

    安装MAMP后,启动服务时提示Apache启动失败,80端口被占用.查看进程发现存在几个httpd. OS X自带Apache,可是默认是没有启动的.我也没有开启Web共享,怎么就开机启动了呢? 不知 ...

  7. 【技术贴】解决Program Files文件夹消失

    好久不写程序了,今天良心发现,就寻找一下自己是否安装了JDK,习惯性的去C盘的Program Files的文件夹下面去找,次奥,没有这个文件夹.好吧.是在玩我么. 于是 打开cmd 输入如下命令 AT ...

  8. UVA 10034 Freckles 最小生成树

    虽然是道普通的最小生成树题目,可还是中间出了不少问题,暴露的一个问题是不够细心,不够熟练.所以这篇博客就当记录一下bug吧. 代码一:kruskal #include<stdio.h> # ...

  9. 测试用（编写优质嵌入式C程序）

    注:相比于Word,如果使用CSDN自带编辑器写出结构清晰的文档,需要花费更多的时间,所以我尝试将我写的一些word文档转换为图片发布,这样就可以保持原来的结构.字体,可以获得更好的可读性.图片的分辨 ...

  10. Android开源项目发现---ListView篇（持续更新）

    资料转载地址:https://github.com/Trinea/android-open-project 1. android-pulltorefresh 一个强大的拉动刷新开源项目,支持各种控件下 ...