还记得之前我使用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. ZOJ3659 Conquer a New Region 并查集

    Conquer a New Region Time Limit: 5 Seconds      Memory Limit: 32768 KB The wheel of the history roll ...

  2. 洛谷T51924 忘情

    二分上界有多大开多大 二分上界有多大开多大 二分上界有多大开多大 重要的事情说三遍 又被bright神仙带着做题了 先无脑上wqs二分 我们可以把这个柿子画一下,区间的花费就变成((sigema(l~ ...

  3. virtual (C# Reference)

    https://msdn.microsoft.com/en-us/library/9fkccyh4.aspx The virtual keyword is used to modify a metho ...

  4. CodeFirst建模：DataAnotation

    示例一 新建一个控制台应用程序,并安装entityframework 新建一个文件Blog.cs类,输入以下代码: using System.ComponentModel.DataAnnotation ...

  5. struct框架

    配置文件struct-config.xml<?xml version="1.0"encoding="UTF-8"?><!DOCTYPE str ...

  6. bzoj 4809: 皇后【dfs】

    爆搜卡线过 并不知道正解是啥 #include<iostream> #include<cstdio> using namespace std; const int N=40; ...

  7. poj 2154 Color【polya定理+欧拉函数】

    根据polya定理,答案应该是 \[ \frac{1}{n}\sum_{i=1}^{n}n^{gcd(i,n)} \] 但是这个显然不能直接求,因为n是1e9级别的,所以推一波式子: \[ \frac ...

  8. [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照（2）添加一个 App Store 图标

    您必须提供一个 App Store 图标,用于在 App Store 中的不同部分展示您的 App.请遵照 Human Interface Guidelines(<人机界面准则>)创建您的 ...

  9. CSS实现居中的方式

    在介绍居中方式之前,简单介绍一下行内元素和块级元素. 行内元素 和其他元素都在同一行 高,行高及外边距和内边距部分可以改变 宽度只与内容有关 行内元素只能容纳文本或者其他行内元素 常用内联元素:a,i ...

  10. self , static 都是何方神圣？

    前言: php中 this  用于代指 对象, 而代指类的却有3个:self , static , parent self , static , parrent 既然都能代指类,那么他们之间又有哪些区 ...