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

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. bzoj 3246 [Ioi2013]Dreaming 贪心

    [Ioi2013]Dreaming Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 638  Solved: 241[Submit][Status][Di ...

  2. acm1878欧拉回路

    欧拉回路解释 对于本题我们只要把每个点的度进行记录,判断是否存在奇数度的点,如果是就可以判断不是欧拉回路,如果不是就在一个点出发,进行dfs搜索, 看能否走到起点,因为对于欧拉回路是一个闭合的回路,无 ...

  3. cin.get()、流和缓冲区

    大家好,这是我在CSDN的第一篇博客.我是一名学习GIS专业的大学生.我从小开始喜欢编程,可是到现在编程水平却长进不大,依然是菜鸟一个.究其原因,虽然这些年乱七八糟的东西学过不少,但是总的来说还是基础 ...

  4. 第一篇 关于Android Studio的快捷键

    公司最近要培训Android的课程,但是发现现在官方网站上已经不提供了Eclipse ADT的下载了,都变成了Android Studio,可能是悲催了! 对于很多Eclipse转过来的同学,不适应的 ...

  5. Eclipse srever起来时,时间超过45s。

    双击servere的名字,在属性界面上进行修改. 如下图: 修改TimeOut中的值即可.

  6. [LeetCode] 11. Container With Most Water ☆☆

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  7. Android 百度定位SDKv4.2及6.0_百度定位实例_安卓定位实例

    介绍 由于项目需要.前几天一直在研究百度定位的功能.通过不断的实践终于有结果了.不愿意独享 现在我把我的研究成果和大家分享一下.其实百度的 API 已经相当不错了 这之所以要写出来.一是自己做一个笔记 ...

  8. 通过gitlabAPI批量创建用户

    上午服务器领导通知我给服务器所有同事添加gitlab账号,服务器总共67个人,这要是一个一个在页面添加,我得累死,是否有其他的办法呢?有问题找google,果然是可以通过gitlab的API批量添加的 ...

  9. Ubuntu 15.04 安装配置Apache和mysql的方法

    前 言 上篇海面特效的博文结尾提到了SideFX开发的HQueue分布式集群,配置HQueue首先需要安装mysql,所以今天先分享一下如何在Ubuntu系统中安装mysql和Apache: Ubun ...

  10. 【BZOJ2815】【ZJOI2012】灾难 [LCA]

    灾难 Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 阿米巴是小强的好朋友.  阿米巴和小强 ...