在尝试写复选框时候遇到一个问题，调试了很久都没调试出来，极其郁闷：

IE10，Chrome,FF中，对于选中状态，第一次$('#checkbox').attr('checked',true)可以实现

但是当通过代码清除选中，下次再通过代码 $('#checkbox').attr('checked',true) 去选中时

虽然代码中有checked='checked',但是画面表现都没有打勾。

例如如下的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

 <!--   引入jQuery -->

<script src="../../scripts/jquery.js" type="text/javascript"></script>

 <script type="text/javascript">

  $(function(){

     //全选

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

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

     });

     //全不选

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

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

     });

  })

  </script>

</head>

<body>

<form method="post" action="">

   你爱好的运动是？

   <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>

后来查了查资料，发现在jquery 1.8.x中的版本，我们对于checkbox的选中与不选中操作如下：

判断是否选中

$('#checkbox').prop('checked')

设置选中与不选中状态：

$('#checkbox').attr('checked',true)

$('#checkbox').attr('checked',false)

但此方法在jquery1.9.1及其以后的版本中，就会出现如上文所示的问题，

后来查找相关的资料，发现现在attr('checked',true)都换成prop('checked',true)

prop()获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的，用来区别之前的.attr()方法.

区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

参考：http://blog.sina.com.cn/s/blog_655388ed01017cnc.html

不同版本的jquery的复选框checkbox的相关问题的更多相关文章

  1. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  2. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  3. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  4. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  5. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  6. Jquery操作复选框(CheckBox)的取值赋值实现代码

    赋值 复选框 CheckBox 遍历 取值  1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...

  7. jQuery 操作复选框(checkbox) attr checked不起作用

    参考资料 http://www.paobuke.com/develop/javascript/pbk849.html   这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...

  8. jquery操作复选框(checkbox)的一些小技巧总结

    1.获取单个checkbox选中项(三种写法) //第一种 $("input:checkbox:checked").val() //第二种 $("input:[type= ...

  9. jQuery——操作复选框(checkbox) attr checked不起作用

    这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 attr(‘checked’,'checked’);与attr(‘checked’,true); 都不好使,要么第一次成 ...

随机推荐

  1. Transformation 线段树好题 好题 （独立写出来对线段树不容易）

    Transformation Time Limit: 15000/8000 MS (Java/Others)    Memory Limit: 65535/65536 K (Java/Others)T ...

  2. Moodle安装图解

    Moodle安装图解 一．    Moodle运行环境搭建 Moodle主要是在Linux上使用Apache, PostgreSQL/MySQL/MariaDB及 PHP 开发(LAMP平台). 1. ...

  3. 【设计模式】 模式PK：观察者模式VS责任链模式

    1.概述 为什么要把观察者模式和责任链模式放在一起对比呢?看起来这两个模式没有太多的相似性,真没有吗?回答是有.我们在观察者模式中也提到了触发链(也叫做观察者链)的问题,一个具体的角色既可以是观察者, ...

  4. MySQL按天，按周，按月，按时间段统计

    MYSQL函数:DATE_FORMAT 例子: select DATE_FORMAT(create_time,'%Y%m%d') days,count(caseid) count from tc_ca ...

  5. 【BZOJ4818】【SDOI2017】序列计数 [矩阵乘法][DP]

    序列计数 Time Limit: 30 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description Alice想要得到一个长度为n的序 ...

  6. 【BZOJ】1774: [Usaco2009 Dec]Toll 过路费

    [题意]给定无向图,距离定义为边权和+最大点权,询问若干个两点最短距离.n<=250. [算法]排序+floyd [题解]考虑floyd的过程是每次找一个中转点,为了在当前找到一条新路径时方便地 ...

  7. Yii2实现读写分离（MySQL主从数据库）

    读写分离(Read/Write Splitting). 1.原理: 让主数据库(master)处理事务性增.改.删操作(INSERT.UPDATE.DELETE),而从数据库(slave)处理SELE ...

  8. perl HTML::LinkExtor模块(2)

    use LWP::Simple; use HTML::LinkExtor; $html_code = get("https://tieba.baidu.com/p/4929234512&qu ...

  9. Win10默认浏览器怎么设置

    1.首先在Win10桌面左下角的开始菜单图标上右键单击鼠标,在弹出的菜单选项中,点击进入“控制面板”,如下图所示. 接下来就可以找到“默认程序”设置了,找到后点击进入设置,如下图所示. 打开Win10 ...

  10. Linux 入门记录：五、vi、vim 编辑器

    一.vi.vim编辑器 vi 是一个命令行界面下的文本编辑工具,最早在 1976 年由 Bill Joy 开发.当时名字叫做 ex.vi 支持绝大多数操作系统(最早在类 Unix 操作系统的 BSD上 ...