今天用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. jmeter JDBC 连接数据库

    1.添加JDBC Connection Configuration 2.添加JDBC Request 3.添加查看结果树 4. 设置下列参数:Database URL:jdbc:mysql://hos ...

  2. nagios报错HTTP WARNING: HTTP/1.1 403 Forbidden解决方法

    Nagios--localhost报警:"WARNING: HTTP/1.1 403 Forbidden "解决方法: In dashboard it shows alert on ...

  3. JavaScript中数组类型的属性和方法

    除了Object,Array类型应该是ECMAScript中最常用的类型了. ECMAScript的数组虽然也是数据的有序列表,但还是与其他语言中的数组有很大的区别.比如ECMAScript数组每一项 ...

  4. linux环境下安装jdk(本文示例是jdk1.6.0_export JAVA_HOME=/usr/java/jdk1.6.0_45 export PATH=$JAVA_HOME/bin:$PATH export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar45)

    第一步:创建一个文件夹安装jdk(虽说地址一般自定义,但是为了方便查找请按照笔者建议目录 ):/usr/java 将jdk-6u45-linux-x64.bin文件放到   /usr/java 文件夹 ...

  5. MySQL两个最简单的delimiter的使用demo

    今天复习MySQL,使用的工具是Navicat for MySQL,写了两个简单的delimiter的demo. 第一个,获取当前时间的年月日时分秒格式的时间: delimiter $$ drop f ...

  6. USACO Section 1.1-2 Greedy Gift Givers

    Greedy Gift Givers 贪婪的送礼者 对于一群(NP个)要互送礼物的朋友,GY要确定每个人送出的钱比收到的多多少. 在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那 ...

  7. 腾讯云安全：开发者必看｜Android 8.0 新特性及开发指南

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 背景介绍 谷歌2017 I/O开发者大会今年将于5月17-19日在美国加州举办.大会将跟往年一样发布最新的 A ...

  8. java复习(9)---数据库JDBC

    java写工程当然需要连接数据库.JDBC技术是连接数据库和应用程序的纽带,本节主要说明如何连接数据库. java中提供sql类. package re09; import java.sql.*; p ...

  9. Linux--shell脚本之文本处理工具

    文本处理工具--grep.sed.awk Bash Shell提供了功能强大的文件处理工具:sed(流编辑器stream editor)和awk,都可使用正则表达式进行模式匹配. 而grep又有助于理 ...

  10. 用extjs6.0写一个点击新建窗口的功能

    一.写一个按钮 注意id { id: 'ListEdit', text:'编辑', iconCls:'x-fa fa-edit' } 二.写新建的页面 下面我新建的是表单,有几点需要注意的: ① 因为 ...