注意：对于input获取属性不能用attr()，只能用prop()。不然出现undefined。

第一版：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>全选、全不选、反选</title>

</head>

<body>

    <label><input type="checkbox" name="" id="">衣服</label>

    <label><input type="checkbox" name="" id="">鞋子</label>

    <label><input type="checkbox" name="" id="">裤子</label>

    <label><input type="checkbox" name="" id="">内衣</label>

    <input id="btn1" type="button" value="全选">

    <input id="btn2" type="button" value="反选">

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

    <script type="text/javascript">

        $('#btn1').click(function(event) {
　　　　　　　　//先保存这些checkbox的这个属性的值，取反。

            var check = $(":checkbox").prop('checked');

            $(":checkbox").prop('checked',!check);

        });

        $('#btn2').click(function(event) {

            $(":checkbox").each(function(index) {
　　　　　　　　//遍历每一个checkbox，针对当前的这个取反。

                var check = $(this).prop('checked');

                $(this).prop('checked',!check);

            });

        });

    </script>

</body>

</html>

第二版：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>全选、全不选、反选</title>

</head>

<body>

    <label><input type="checkbox" name="" id="">衣服</label>

    <label><input type="checkbox" name="" id="">鞋子</label>

    <label><input type="checkbox" name="" id="">裤子</label>

    <label><input type="checkbox" name="" id="">内衣</label>

    <input id="btn1" type="button" value="全选">

    <input id="btn2" type="button" value="反选">

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

    <script type="text/javascript">

        $('#btn1').click(function(event) {

            if($(":checkbox").prop('checked')){

                $(":checkbox").prop('checked',false);

                $(this).attr('value','全选');

            }else{

                $(":checkbox").prop('checked',true);

                $(this).attr('value','全不选');

            }

        });

        $('#btn2').click(function(event) {

            $(":checkbox").each(function(index) {

                var check = $(this).prop('checked');

                console.log(check);

                $(this).prop('checked',!check);

            });

        });

    </script>

</body>

</html>

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

  • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

上面的描述也许有点模糊，举几个例子就知道了。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

再举一个例子：

<input id="chk1" type="checkbox" />是否可见

<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false

$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined

$("#chk2").attr("checked") == "checked"

jqeury实现全选和反选的更多相关文章

  1. checkbox的全选与反选

    最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...

  2. jQuery checkbox的全选与反选

    1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...

  3. 夺命雷公狗-----React---28--小案例之react经典案例todos（全选和反选）完

    这个功能实现的步骤如下所示: 最终实现全选和反选,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  4. PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

  5. ichecked 全选、反选

    //iChecked复选框的全选.反选var checkBox =function (checkParents){ $(checkParents).find('.minimalCheckBox1'). ...

  6. checkbox全选，反选，取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  7. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  8. checkbox全选与反选

    用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...

  9. jquery一个按钮全选和反选

    1.jquery实现复选框全选和反选的方式有好几种,今天遇到一个问题,只用下边的方式生效:function checkAll(){ var check=$('#check_all').is(':che ...

随机推荐

  1. 带动画效果的jQuery手风琴

    带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...

  2. Android6.0 旋转屏幕（五）WMS启动应用流程（屏幕方向相关）

    一.强制设置方向 1.Activity 如果要强制设置一个Activity的横竖屏可以通过Manifest去设置,跟Activity相关的信息都会保存在ActivityInfo当中. android: ...

  3. 分享知识-快乐自己：Struts2文件上传及文件下载

    1)Struts2单文件上传 action:类文件 package com.mlq.action; import com.opensymphony.xwork2.ActionSupport; impo ...

  4. js 图片上传

    可能很多不熟悉的图片上传的同学会觉得有点懵,其实做过一次你就会发现特别的简单. 只是一个formData格式的表单提交,把地址写到 action = "" 里面就可以了,当然你可以 ...

  5. Linux中vsftpd安装和配置

    目录 Redhat/CentOS安装vsftp软件 Ubuntu/Debian安装vsftp软件 Redhat/CentOS安装vsftp软件 1. 安装vsftp $ yum install vsf ...

  6. POJ1287(最小生成树入门题)

    Networking Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7753   Accepted: 4247 Descri ...

  7. DBS：目录

    ylbtech-DBS:目录 1.返回顶部 1.   2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部   9.返回顶 ...

  8. JS---计算两个日期之间相差多少天

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. WPF win7+vs2010开发的打印功能，怎么在XP系统上无法打印

    在wpf 中打印功能很强大,但最近是在win7上可以但是布置到xp上就不可以了,查了好多资料终于知道怎么回事了原来xp里没有.net framework3.5 安装一个就OK了要先安装4.0.

  10. [hdu3586]Information Disturbing树形dp+二分

    题意:给出一棵带权无向树,以及给定节点1,总约束为$m$,找出切断与所有叶子节点联系每条边所需要的最小价值约束. 解题关键:二分答案,转化为判定性问题,然后用树形dp验证答案即可. dp数组需要开到l ...