注意：对于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. BZOJ 1572 [Usaco2009 Open]工作安排Job：贪心 + 优先队列【先放再更新】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1572 题意: 有n个工作,每个工作有一个截止日期dead[i]和收益pay[i]. 完成一 ...

  2. 分享知识-快乐自己：Hibernate 中的 HQL 语句的实际应用

    概要: Hibernate 支持三种查询方式: HQL查询.Criteria查询及原声 SQL (Native SQL)查询. HQL(Hibernate Query Language,Hiberna ...

  3. 搭建LoadRunner中的场景(二) 集合点

    Rendezvous: 这个单词来自于法语,军队集合的意思.LoadRunner中是指各虚拟用户在同一时刻完成指定的操作. 一. 集合点设置步骤 1. 在脚本中需要测试并发性能的操作之前加入集合点. ...

  4. 时尚与深度学习系列：Fashion forward: Forecasting visual style in fashion

           https://arxiv.org/pdf/1705.06394.pdf         将深度学习与时尚预测联系在一起,是一个很有趣但是估计结果会没什么成效的话题.因为,时尚预测这一领 ...

  5. 为什么修改头文件make不重新编译

    make是根据依赖文件的时间戳来决定要不要重新编译的.在: object: deplist # actions 中,可以把头文件加进deplist,这样修改头文件后,make就会重新编译了. 单纯地修 ...

  6. Thrift之TProcess类体系原理及源码详细解析

    我的新浪微博:http://weibo.com/freshairbrucewoo. 欢迎大家相互交流,共同提高技术. 之前对Thrift自动生成代码的实现细节做了详细的分析,下面进行处理层的实现做详细 ...

  7. YPBPR_PC下图像有毛刺或者水纹干扰的处理办法

    VGA下一般是不做任何处理的,当然也不排除个别情况下,客户强烈要求,会打开的现象. (1)做一下auto color和auto adjust (2)调节一下ADC,如果是mstar的方案,将对比机的的 ...

  8. DS：template

    ylbtech-DS: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.cnbl ...

  9. 资源：template

    ylbtech-资源: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.cnbl ...

  10. CCD与CMOS的区别？

    我们在购买相机或是摄像机时,都会看到使用CMOS镜头或是CCD镜头,那么CCD与CMOS是什么意思呢,CCD与CMOS的区别是什么?首先,让我们了解CCD与CMOS的意思. CCDCCD使用一种高感光 ...