还记得之前我使用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. HDU 1269 迷宫城堡 最大强连通图题解

    寻找一个迷宫是否是仅仅有一个最大强连通图. 使用Tarjan算法去求解,经典算法.必需要学习好,要自己创造出来是十分困难的了. 參考资料:https://www.byvoid.com/blog/scc ...

  2. android菜鸟之路-事件分发机制总结(二)

    ViewGroup事件分发机制 自己定义一个LinearLayout,ImageView和Button,小二,上代码 <LinearLayout xmlns:android="http ...

  3. ionic/cordova 真机调试

    android下简单,连接手机后,直接: myProjectPath>ionic run android ios下比较麻烦点,要先装ios-deploy: ​sudo npm install - ...

  4. iOS开发——基础篇——assign，copy，retain之间的区别以及weak和strong的区别

    @property (nonatomic, assign) NSString *title; 什么是assign,copy,retain之间的区别? assign: 简单赋值,不更改索引计数(Refe ...

  5. 玲珑学院OJ 1028 - Bob and Alice are playing numbers 字典树，dp

    http://www.ifrog.cc/acm/problem/1028 题解处:http://www.ifrog.cc/acm/solution/4 #include <cstdio> ...

  6. 4.2 Context-Free Grammars

    4.2 Context-Free Grammars Grammars were introduced in Section 2.2 to systematically describe the syn ...

  7. POJ1279 Art Gallery 多边形的核

    POJ1279 给一个多边形 求它的核的面积 所谓多边形的核 是多边形中的一个点集 满足其中的点与多边形边上的点的连线全部在多边形中 用多边形的每一条边所在的直线去切整个坐标平面 得到的一个凸包就是核 ...

  8. gitweb

    1. 简介 Gitweb提供了git版本库的图形化web浏览功能.可以到网站http://git.kernel.org/体验下效果,如下图所示. Gitweb界面 它既可以通过配置架设于web服务器上 ...

  9. win10设置锁屏时间

    这里应该修改成自己希望的分钟数  比如120分钟

  10. 微信小程序setData的使用，通过[...]进行动态key赋值

    首先先介绍一下微信小程序Page.prototype.setData(Object data, Function callback)的讲解: setData函数用于将数据从逻辑层发送到视图层(异步), ...