今天用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. java 基础知识三 java变量

    java  基础知识 三 变量 1.作用域 {} 包围起来的代码 称之为代码块,在块中声明的变量只能在块中使用 2.常量 就是固定不变的量,一旦被定义,它的值就不能再被改变. 3.变量 变量必须在程序 ...

  2. 【机器学习】神经网络实现异或（XOR）

    注:在吴恩达老师讲的[机器学习]课程中,最开始介绍神经网络的应用时就介绍了含有一个隐藏层的神经网络可以解决异或问题,而这是单层神经网络(也叫感知机)做不到了,当时就觉得非常神奇,之后就一直打算自己实现 ...

  3. oracle分区表的建立方法(包含已经存在的表要分区)分享，非常好

    非原创 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Oracle的分区表可 ...

  4. KVO 模式详解

    KVO:观察者模式.当指定的被观察对象属性被修改时,允许对象接收到通知的机制. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; ...

  5. JS的内置对象以及JQuery中的部分内容

     [js中的数组]              1  数组的概念:可以再内存中连续存储的多个有序元素的结构                元素的顺序:称为下标,通过下标查找对应元素.           ...

  6. Yii Framework 的安装使用教程及文件结构详解

    原文地址可以见:http://www.open-open.com/lib/view/open1394436359114.html 这里面说的很详细.

  7. 卷积神经网络CNN总结

    从神经网络到卷积神经网络(CNN)我们知道神经网络的结构是这样的: 那卷积神经网络跟它是什么关系呢?其实卷积神经网络依旧是层级网络,只是层的功能和形式做了变化,可以说是传统神经网络的一个改进.比如下图 ...

  8. scrapy（一）建立一个scrapy项目

    本项目实现了获取stack overflow的问题,语言使用python,框架scrapy框架,选取mongoDB作为持久化数据库,redis做为数据缓存 项目源码可以参考我的github:https ...

  9. spring、spring mvc、mybatis框架整合基本知识

    学习了一个多月的框架知识了,这两天很想将它整合一下.网上看了很多整合案例,基本都是基于Eclipse的,但现在外面公司基本都在用Intellij IDEA了,所以结合所学知识,自己做了个总结,有不足之 ...

  10. （原创）如何在性能测试中自动生成并获取Oracle AWR报告

    版权声明:本文为原创文章,转载请先联系并标明出处 由于日常使用最多的数据库为Oracle,因此,最近又打起了Oracle的AWR报告的主意. 过去我们执行测试,都是执行开始和结束分别手动建立一个快照, ...