还记得之前我使用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. 后台发送http请求通用方法，包括get和post

    package com.examsafety.service.sh; import java.io.BufferedReader; import java.io.IOException; import ...

  2. gradle使用笔记

    1 gradle user home 默认情况下是-/.gradle目录.可以使用gradle -g [directory]修改. 1.1 ./gradle/caches gradle下载的所有的依赖 ...

  3. 千万数据条 用户特征数据 写入mysql

    from mysql_tool import * import copy s = ''' INSERT INTO `qqzone`.`myu` (`id`, `uid`, `age`, `gender ...

  4. 【HDU4706】Children's Day

    http://acm.hdu.edu.cn/showproblem.php?pid=4706 水题,也不知道有没有spj // <4706.cpp> - 11/03/16 14:11:21 ...

  5. leetcode 258. Add Digits——我擦，这种要你O（1）时间搞定的必然是观察规律，总结一个公式哇

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

  6. [测试]单元测试框架NUnit

    说到测试,相信大家都或多或少了解. 按照各自分类,就自己知道包括 A.单元测试.集成测试.系统测试 B.白盒测试.黑盒测试 C.压力测试.性能测试.安全测试 ...... 反正是太多太多.就做开发以来 ...

  7. MAMP/xampp安装redis

    nmp/amp/xampp安装redis 一.安装redis服务 1.通过homebrew安装redis sudo brew install redis 2.启动redis服务,且接受客户端连接 su ...

  8. bzoj1036 [ZJOI2008]树的统计Count——LCT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1036 LCT水题! 然而没有1A(咬牙)! 注意值有负数,所以取 max 的话要把作为“哨兵 ...

  9. 每天一个 linux命令（35）：ln 命令（转载）

    转载:http://www.cnblogs.com/peida/archive/2012/12/11/2812294.html ln是linux中又一个非常重要命令,它的功能是为 某一个文件在另外一个 ...

  10. Akka源码分析-Cluster-Singleton

    akka Cluster基本实现原理已经分析过,其实它就是在remote基础上添加了gossip协议,同步各个节点信息,使集群内各节点能够识别.在Cluster中可能会有一个特殊的节点,叫做单例节点. ...