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

<!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. Android App资源的查找过程分析

    Android资源管理框架实际就是由AssetManager和Resources两个类来实现的.其中,Resources类可以根据ID来查找资源,而AssetManager类根据文件名来查找资源.事实 ...

  2. wpf+xml实现的一个随机生成早晚餐的小demo

    话说每到吃完的时间就发愁,真的不知道该吃什么,然后就想到做一个生成吃什么的小软件,既然这个软件如此的简单,就打算用wpf开发吧,也不用数据库了,直接保存在xml中就可以了 程序整体结构如下图 首先我写 ...

  3. Bootstrap 轮播（Carousel）插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  4. BZOJ 3707: 圈地 计算几何

    Description 2维平面上有n个木桩,黄学长有一次圈地的机会并得到圈到的土地,为了体现他的高风亮节,他要使他圈到的土地面积尽量小.圈地需要圈一个至少3个点的多边形,多边形的顶点就是一个木桩,圈 ...

  5. 修改sphinx最大输出记录数

    修改sphinx最大输出记录数 归纳如下: Sphinx的查询默认最大记录数是:1000,而我们想更改这个数值.就需要更改三个地方. 1是更改sphinx.conf配置文件的:max_matches ...

  6. find+*的问题

    转自find+*的问题 不久前做移植的时候想把某个目录下的C文件都找出来,然后拷贝下,结果一直报错,我用的是*.c作为pattern.今天看论坛的时候知道为什么了. $ ls test2.c  tes ...

  7. Vijos_1792_摆花_(动态规划,多重集组合数)

    描述 https://vijos.org/p/1792 共n种花,第i种花有a[i]个,要摆m个,同一种花连续且花按照序号从小到大排,问共有多少种摆花方案.   描述 小明的花店新开张,为了吸引顾客, ...

  8. oracle 大表删除数据后，回收空间的问题。

    在oracle中由于表结构设计不合理或者需要清楚老数据的时候,经常需要对大表数据进行清理. 一般有一下几种方法: 1. 删除大部分数据,留下小部分数据.我们可以把需要保留的数据转移到别的表,然后再把大 ...

  9. SQL Server 除法 不起作用的问题

    SELECT          CASE WHEN  aa.itax is NULL  THEN aa.fskje ELSE        aa.fskje  / ( 1 + (tjob.itax / ...

  10. HDU-1391 Number Steps

    http://acm.hdu.edu.cn/showproblem.php?pid=1391 Number Steps Time Limit: 2000/1000 MS (Java/Others)   ...