还记得之前我使用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. 华为OJ:数字颠倒

    将数字转成一个字符串即可了. import java.util.Scanner; public class convertNumber { public static void main(String ...

  2. JPA測试实例

    依赖架包 实体 import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.G ...

  3. MVC 用户权限HttpContext.User.IsInRole()

    这几天在用MVC做一个项目,用到了HttpContext.User.IsInRole() 这个方法,但是每次当我用的时候,HttpContext.User.IsInRole(“Admin”) 返回的永 ...

  4. 中国剩余定理模板&俄罗斯乘法

    void ex_gcd(ll a,ll b,ll &d,ll &x,ll &y){ if(!b){d=a;x=1LL;y=0LL;} else {ex_gcd(b,a%b,d, ...

  5. 常用经典SQL语句大全完整版--详解+实例 《来自网络，很全没整理，寄存与此》

    常用经典SQL语句大全完整版--详解+实例 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML ...

  6. 解决juqery easyui combobox只能选择问题

    1.首先设定框为 combobox样式,该字段值为了进行值的显示 <tr class="odd_row"> <td class="TableLabel_ ...

  7. IE6的3像素BUG产生条件及解决方法

    1.IE6中第一个元素浮动第二个元素不浮动,这两个元素之间就会产生3像素BUG 2.解决方案: 2.1若若宽度一定则给第二个元素添加 float 样式即可: 2.2若宽度自适应: 2.2.1  _ma ...

  8. Python基础 — NumPy

    NumPy--简介  Numpy(Numerical Python的简称)是一个由多维数组对象和用于处理数组的例程集合组成的库.  Numpy内部解除了Python的PIL(全局解释器锁),运算效率极 ...

  9. bzoj1528 sam-Toy Cars(贪心，优先队列)

    「BZOJ1528」[POI2005] sam – Toy Cars Description Jasio 是一个三岁的小男孩,他最喜欢玩玩具了,他有n 个不同的玩具,它们都被放在了很高的架子上所以Ja ...

  10. less新手入门（三） 作为函数使用的Mixin、@import 导入指令 、@import 导入选项

    五.作为函数使用的Mixin 从mixin返回变量 在mixin中定义的所有变量都是可见的,并且可以在调用者的作用范围中使用(除非调用者用相同的名称定义它自己的变量). .mixin(){ @widt ...