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

<!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所提供的"重载"(overloading)是指动态地"创建"类属性和方法.我们是通过 魔术方法(magic methods)来实现的. 当调用当前环 ...

  2. centos nginx

    1.关闭SELinux 查看SELinux状态: (1)/usr/sbin/sestatus -v ##如果SELinux status参数为enabled即为开启状态 SELinux status: ...

  3. java中抽象类与接口的区别

    1.abstract class 在 Java 语言中表示的是一种继承关系,一个类只能使用一次继承关系.但是,一个类却可以实现多个interface. 2.在abstract class 中可以有自己 ...

  4. 读《CSCW的一种建模与实现方法》

    这篇论文为我们描述了作者构建的一种基于交互.活动.协作三层结构的协同工作模型,并提出了一种采用“镜头焦点”和“自由交互”相结合的协作模型实现方法. 计算机支持的协同工作就是利用计算机技术将时间上分离. ...

  5. HTML -- 元素和属性

    HTML -- 元素 HTML元素是从开始标签到结束标签之间的代码,如: <!-- 加粗标签 --> <b>一些元素</b> <!-- 换行 --> & ...

  6. xcode 必用插件二

    本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...

  7. swift 与 OC 混合编程

    原文地址:http://www.cocoachina.com/swift/20150608/12025.html 一.解决问题 Swift项目需要使用封装好的Objective-c组件.第三方类库,苹 ...

  8. Android使用SAX解析xml

    一.理论准备     SAX采用事件驱动机制来解析XML文档,每当SAX解析器发现文档开始.元素开始.文本.元素结束.文档结束等事件时,就会向外发送一次事件,而开发者则可以通过编写事件监听器处理这些事 ...

  9. POJ_2446_Chessboard

    题目意思就是一个M*N的有洞棋盘棋盘上,用1*2的板子去覆盖没有洞的地方,要求板子不能重叠,最终能否将棋盘完整覆盖. 代码: #include<stdio.h> #include<s ...

  10. OSS研究

    在以前没有毕业之前,做过了一个了播放器,其实就是mplayer的二次开发. 如果在这个播放器之上,加个oss作声音输入,那不就可以做个卡拉OK啦? 1.OSS的定义 OSS(Open Sound Sy ...