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

<!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. lamp环境－编译安装

    http://my.oschina.net/JerryBaby/blog/292731 http://blog.chinaunix.net/uid-20639775-id-154442.html ht ...

  2. 由json生成php配置文件

    $str = '<?php return ' . var_export(json_decode($json, true), true) . ';';file_put_contents('./co ...

  3. php练习2——乘法表，变量的使用

    目标:输出九九乘法表 程序: 结果: 目标: 程序variable01.html和variable01.php 结果:

  4. 使用Yii框架中遇到的三个问题

    以下由我们在信易网络公司开发项目的时候终结出的一些经验 使用Yii框架中遇到的三个问题 1.main.php文件中欲引入全局变量的问题 还原一下此问题:在Yii框架中,main.php一般会作为整个应 ...

  5. python【第十八篇】Django基础

    1.什么是Django? Django是一个Python写成的开源Web应用框架.python流行的web框架还有很多,如tornado.flask.web.py等.django采用了MVC的框架模式 ...

  6. ASP.NET MVC轻教程 Step By Step 1 ——入门

    使用ASP.NET MVC有一段时间了,本人还是非常喜欢ASP.NET MVC这个框架模式的.在经历了WebForm复杂粗暴的做法后,自然感觉简洁优雅的MVC清新可人,只不过WebForm和MVC的设 ...

  7. hdu 4764 && 2013长春网赛题解

    一个组合游戏题. 解答: 从后面往前面推,首先n-1是必胜位,然后前面的k位是必败位,如此循环下去.所以题目就容易了! 代码: #include<cstdio> using namespa ...

  8. webkit javascript

    http://www.infoq.com/cn/news/2013/02/douglas-interview http://blog.csdn.net/horkychen/article/detail ...

  9. C#学习笔记一:C#开发环境的设置

    C#是.NET Framework的一部分,用于编写.NET应用程序. C#集成开发环境(IDE) 微软提供了以下C#编程开发工具: Visual Studio 2010 (VS) Visual C# ...

  10. UVA 10034 Freckles 最小生成树

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