今天用jQuery学习表单这一章节的内容，再次遇到表单全选时，不能进行第二次全选的情况。反复查看测试仍然找不到是什么原因。后来在网上查到原来是jQuery1.6以后的版本用到的是prop。用attr的话不会多次实现，因为attr不会记录当前checkbox的选中状态。

表单这一章节内容让我感觉到有点吃力，总之好好努力吧！

以下是代码说明：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>复选框</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>

    <script type="text/javascript">

    $(function(){

        //使用attr

        /*$("#CheckedAll").click(function(){

            if(this.checked){

                $('[name=items]:checkbox').attr('checked',false);

            } else {

                $('[name=items]:checkbox').attr('checked',true);

            }

        });*/

        //使用prop

        $("#CheckedAll").click(function(){

            if(this.checked){

                $('[name=items]:checkbox').prop('checked',false);

            } else {

                $('[name=items]:checkbox').prop('checked',true);

            }

        });*/

    });

    </script>

</head>

<body>

    <form>

        你爱好的运动是？<br>

        <input type="checkbox" name="items" value="足球">足球

        <input type="checkbox" name="items" value="篮球">篮球

        <input type="checkbox" name="items" value="羽毛球">羽毛球

        <input type="checkbox" name="items" value="乒乓球">乒乓球<br>

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

        <input type="button" id="CheckedNo" value="全部选">

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

        <input type="button" id="send" value="提 交">

    </form>

</body>

</html>

有关与attribute和property的区分可参考：http://www.tuicool.com/articles/3uuQRr6

关于jQuery表单选择中prop和attr的区别。的更多相关文章

  1. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  2. 表单提交中get与post的区别

    在Form里面,可以使用post也可以使用get.它们都是method的合法取值. 1. get是从服务器上获取数据,post是向服务器传送数据.   2. get是把参数数据队列加到提交表单的ACT ...

  3. Jquery 获取Checkbox值，prop 和 attr 函数区别

    总结: 版本 1.6 1.6 1.4 1.4 函数 勾选 取消勾选 勾选 取消勾选 attr('checked') checked undefined true false .prop('checke ...

  4. jquery中prop()和attr()的区别

    相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...

  5. 第82天：jQuery中prop()和attr()的区别

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  6. jq中.prop()与attr()的区别

    一,定义 prop() 方法设置或返回被选元素的属性和值.prop() 方法应该用于检索属性值 attr()  方法设置或返回被选元素的属性和值.如需检索 HTML 属性,请使用 attr() 方法代 ...

  7. jq中prop和attr的区别以及各自的使用

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  8. jQ中prop与attr的区别

    1.prop适用于HTML元素本身就带有的固有属性 2.attr适用于HTML元素我们自定义的属性 <input type="checkbox" value="复选 ...

  9. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

随机推荐

  1. html+css底部自动固定底部

    前端在切图过程中,肯定遇见过这种情况. 页面结构由三个部分组成,头部.内容.底部. 当一个页面的内容没撑满屏幕时,底部是跟着内容而并列存在的. 这个时候如果是大屏的话,底部下面会有多余的空白区域,而网 ...

  2. 在ASP.NET MVC4中配置Castle

    ---恢复内容开始--- Castle是针对.NET平台的一个非常优秀的开源项目,重点是开源的哦.它在NHibernate的基础上进一步封装,其原理基本与NHibernate相同,但它较好地解决NHi ...

  3. 图文详解linux如何搭建lamp服务环境

    企业网站建设必然离不开服务器运维,一个稳定高效的服务器环境是保证网站正常运行的重要前提.本文小编将会详细讲解Linux系统上如何搭建配置高效的lamp服务环境,并在lamp环境中搭建起企业自己的网站. ...

  4. Redis和Spring整合

    Redis和Spring整合 Redis在这篇里就不做介绍了~以后系统的学学,然后整理写出来. 首先是环境的搭建 通过自己引包的方式,将redis和spring-redis的包引到自己的项目中,我项目 ...

  5. CSS也需要重构

    最初接触到的CSS面向对象,是项目里的CSS超过8千行,缺乏约束和管理,在近期或不远的将来,有迫切的要求需要重构.CSS面向对象和模块化. CSS代码遇到的问题: 重用性差,看着一个CSS的名称,很难 ...

  6. mysql数据库实操笔记20170419

    一.insert与replace区别: insert:当表里有字段设置了主键或者唯一时,插入重复的唯一或主键字段值是不能执行的: replase:当表里有字段设置了主键或者唯一时,插入重复的唯一或主键 ...

  7. 使用JSONObject生成和解析json

    1. json数据类型 类型 描述 Number 数字型 String 字符串型 Boolean 布尔型 Array 数组,以"[]"括起来 Object 对象,类似于C中的结构体 ...

  8. unity 看到Sphere内部，通过Sphere播放全景视频时候遇到的问题

    Unity创建一Sphere默认是看不到球体内部的,所以需要用 Cull Front  修改剔除的方向,这就会带来一个新的问题,所播放的视频是像镜子一样翻转着的,所以要改变它的UV坐标使其翻转过来 f ...

  9. ST-LINK调试完成

    今天真是一波三折啊. 买回来的st-link刚开始不会用,各种百度,还好有两个很好的教程.连接发在下面吧. http://blog.csdn.net/TXF1984/article/details/4 ...

  10. Web性能优化工具WebPageTest（三）——本地部署（Windows 7版本）

    这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...