今天用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. !function 笔记

    一般看JQuery插件里的写法是这样的 (function($) { //... })(jQuery); 今天看到bootstrap的javascript组件是这样写的 !function( $ ){ ...

  2. 1147: 零起点学算法54——Fibonacc

    1147: 零起点学算法54--Fibonacc Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitted: 20 ...

  3. 前端代码组织优化--小demo（进阶你的思路）

    事出必有因 最近在看老项目的代码,一个富客户端的js代码,几千行的代码,全是function(){} var...的垂直布局,真的是要感动的哭了. 一开始都是这样,想实现什么功能,不管三七二十一,fu ...

  4. gulp基于seaJs模块化项目打包实践【原创】

    公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...

  5. jdk8的新特性 Lambda表达式

    很多同学一开始接触Java8可能对Java8 Lambda表达式有点陌生. //这是一个普通的集合 List<Employee> list = em.selectEmployeeByLog ...

  6. Centos下装eclipse测试Hadoop

    (一),安装eclipse 1,下载eclipse,点这里 2,将文件上传到Centos7,可以用WinSCP 3,解压并安装eclipse [root@Master opt]# tar zxvf ' ...

  7. SecureCRT中vim乱码问题

    Options->Session Options,接着在Terminal->Appearance页签中设定Character encoding为Unicode (UTF-8).

  8. ECharts 实现人民的名义关系图谱 代码开源

    1.什么是ECharts ECharts是百度开源的纯 Javascript 图表库,目前开源可以与highcharts相匹敌的一个图表库,相信有很多国内用户使用. 官网 http://echarts ...

  9. 蓝桥杯-大衍数列-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  10. [C#学习]1.Hello World

    在很多时候我们都是被helloworld带入编程的世界的,所以这句话应该算是我们程序员最熟悉的一句话了把.所以在这里,那我也照样以helloworld为例子来引入我们的C#学习. 在往常的hellow ...