还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果！现在我就来使用jQuery完成对复选框的全选和全不选效果，显示效果为： 
 
要完成这个效果，必然要了解jQuery中对属性操作的方法：

  • attr()：设置或返回被选元素的属性值。

    • 使用方法一：$("xxx").attr("src");——返回被选元素的src属性值
    • 使用方法二：$("xxx").attr("src","test.jpg");——设置被选元素的src属性值
    • 使用方法三：$("xxx").attr({src:"test.jpg", alt:"Test Image"});——为被选元素设置src和alt属性

  • removeAttr()：从每一个匹配的元素中删除一个属性，即移除属性。

  • prop()：与attr()方法类似，只不过它是新版本的方法。 
    • 使用方法一：$("xxx").prop("src");——返回被选元素的src属性值
    • 使用方法二：$("xxx").prop("src","test.jpg");——设置被选元素的src属性值
    • 使用方法三：$("xxx").prop({src:"test.jpg", alt:"Test Image"});——为被选元素设置src和alt属性
  • removeProp()：与removeAttr()方法类似，移除属性。
  • addClass(class)：为每个匹配的元素添加指定的类名，即添加某个样式。
  • removeClass(class)：从所有匹配的元素中删除全部或者指定的类，即移除某个样式。

下面按照如下步骤来使用jQuery完成对复选框的全选和全不选效果：

  1. 在页面中添加复选框
  2. 引入jQuery的js文件
  3. 编写jQuery的入口函数
  4. 点击上面的复选框，获得下面所有的复选框
  5. 修改下面所有的复选框的值

我摘出最重要的一个html文件——【data.html】：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="../css/style.css" />

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>

        <script>

            // 表格的隔行换色

            $(function() {

                $("tbody tr:odd").addClass("odd");

                $("tbody tr:even").addClass("even");

            });

        </script>

    </head>

    <body>

        <table id="tab1" border="1" width="80%" align="center">

            <thead>

            <tr>

                <th><input type="checkbox" id="selectAll" /></th>

                <th>分类的ID</th>

                <th>分类的名称</th>

                <th>分类的描述</th>

                <th>操作</th>

            </tr>

            </thead>

            <tbody>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>1</td>

                    <td>手机数码</td>

                    <td>手机数码</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>2</td>

                    <td>电脑办公</td>

                    <td>电脑办公</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>3</td>

                    <td>烟酒糖茶</td>

                    <td>烟酒糖茶</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>4</td>

                    <td>鞋靴箱包</td>

                    <td>鞋靴箱包</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>5</td>

                    <td>汽车用品</td>

                    <td>汽车用品</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

接着编写jQuery代码来完成对复选框的全选和全不选效果：

<script>

    // 复选框的全选和全不选

    $(function() {

        // 获得上面的复选框

        var $selectAll = $("#selectAll");

        // alert($selectAll.prop("checked")); // 返回undefined未定义

        $selectAll.click(function() {

            // alert($selectAll.prop("checked"));

            if ($selectAll.prop("checked") == true) {

                // 上面的复选框已被选中

                $(":checkbox[name='ids']").prop("checked", true);

            } else {

                // 上面的复选框没被选中

                $(":checkbox[name='ids']").prop("checked", false);

            }

        });

    });

</script>
细心的读者应该能看出以上代码能简化为：
<script>

    // 复选框的全选和全不选

    $(function() {

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

            $(":checkbox[name='ids']").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象

        });

    });

</script>

读者如须查看源码，可参考一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选！

.

一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选的更多相关文章

  1. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  2. java 调用 C# 类库搞定，三步即可，可以调用任何类及方法，很简单，非常爽啊

    java 调用 C# 类库搞定,三步即可,可以调用任何类及方法,很简单,非常爽啊 java 调用 C# 类库搞定,可以调用任何类及方法,很简单,非常爽啊 总体分三步走: 一.准备一个 C# 类库 (d ...

  3. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  4. 三步轻松搞定delphi中CXGRID手动添加复表头（多行表头，报表头）

    网上有代码动态生成cxgrid多行表头的源码,地址为:http://mycreature.blog.163.com/blog/static/556317200772524226400/ 如果要手动设计 ...

  5. JQuery的复选框选中、取消、全选，全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  6. jquery如何判断checkbox（复选框）是否被选中 全选 反选

    好长时间没用jq, 之前用的都是ng. 想着随便参考一下,结果被坑.因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google 给出坑人文章的链接 ...

  7. 搞定thrift双向消息

    thrift作为脱胎于facebook的rpc框架,各方面都非常优秀.清晰的分层设计,多语言的支持,以及不输protocolbuffer的效率(compact下优于protocolbuffer),都让 ...

  8. 解放双手，自动生成“x.set(y.get)”，搞定vo2dto转换

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 给你机会,你也不中用啊 这些年从事编程开发以来,我好像发现了大部分研发那些不愿意干的 ...

  9. jquery简单实现复选框的全选与反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. web 页面传值乱码问题

    今天碰到一个问题,将A页面中文值传到B页面,session保存,然后在C页面显示,页面显示乱码 百度了一下什么原因,以为是session保存中乱码,于是将B页面的通过Server.UrlDecode( ...

  2. MySQL-查询数据（SELECT）

    MySQL SELECT语句 SELECT语句用于从表或视图中获取数据 Select语句组成 Select 之后是逗号分隔列或星号(*)的列表,表示要返回所有列. From 指定要查询数据的表或视图. ...

  3. （一）Java 入门教程

    Java 入门教程 Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言. Java可运行于多个平台,如Windows, Mac OS,及其他多种UNIX版本的系统 ...

  4. 【bzoj4538】[Hnoi2016]网络

    我们考虑树剖,线段树上维护一个堆,保存不经过该段区间的路径的权值. 对于一条路径我们将对于线段树中的区间提取出来,在对于线段树中进行修改.也就是在堆中插入或删除. 对于一次询问,只要找到包含该点的线段 ...

  5. 浏览器对MP4视频 帧宽度 高度的兼容性

    传入oss后 或者 本地 拖动到   浏览器 谷歌 都不能播放 Edge 可以播放 但 Edge不支持 本地拖入 播放 搜狗浏览器 同谷歌

  6. 内容原发网站seo不重视2个标签，导致seo效果不如转发网站

    采集数据,挖掘观点,小心求证,得出结论 时间经过 今日凌晨,爬虫热点采集,其中第一财经是目标站之一,采集到了 http://www.yicai.com/news/5391233.html 谷歌去年悄然 ...

  7. OTN / SONET / SDH

    ①OTN(光传送网,OpticalTransportNetwork),是以波分复用技术为基础.在光层组织网络的传送网,是下一代的骨干传送网; ②SONET (Synchronous Optical N ...

  8. YTU 2630: E2 驾驭const

    2630: E2 驾驭const 时间限制: 1 Sec  内存限制: 128 MB 提交: 673  解决: 491 题目描述 引入了const关键词,用于指定"常"对象及&qu ...

  9. ASP.NET和C#的区别/

    1..NET是一个平台,一个抽象的平台的概念. .NET平台其本身实现的方式其实还是库,抽象层面上来看是一个平台. 个人理解.NET核心就只是.NET Framework. .NET Framewor ...

  10. ORACLE分区表发挥性能

    1.1 分区表PARTITION table 在ORACLE里如果遇到特别大的表,可以使用分区的表来改变其应用程序的性能. 1.1.1 分区表的建立: 某公司的每年产生巨大的销售记录,DBA向公司建议 ...