一个网上很多的例子如下:

    <!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
// 全选
$("#btnCheckAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", true);
}); // 全不选
$("#btnCheckNone").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", false);
}); // 反选
$("#btnCheckReverse").bind("click", function () {
$("[name = chkItem]:checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
}); // 全不选
$("#btnSubmit").bind("click", function () {
var result = new Array();
$("[name = chkItem]:checkbox").each(function () {
if ($(this).is(":checked")) {
result.push($(this).attr("value"));
}
}); alert(result.join(","));
});
});
</script>
</head>
<body>
<div>
<input name="chkItem" type="checkbox" value="今日话题" />今日话题
<input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
<input name="chkItem" type="checkbox" value="财经" />财经
<input name="chkItem" type="checkbox" value="汽车" />汽车
<input name="chkItem" type="checkbox" value="科技" />科技
<input name="chkItem" type="checkbox" value="房产" />房产
<input name="chkItem" type="checkbox" value="旅游" />旅游
</div>
<div>
<input id="btnCheckAll" type="button" value="全选" />
<input id="btnCheckNone" type="button" value="全不选" />
<input id="btnCheckReverse" type="button" value="反选" />
<input id="btnSubmit" type="button" value="提交" />
</div>
</body>
</html>

运行后,在火狐下面发现一个问题百思不得其解 
问题描述:第一次点全选可以,然后点击全不选,接着再点击全选、全不选、反选就没了反应,后来用其他浏览器发下可以,所以感觉是兼容性的问题,后来查阅资料发现果然是的,参考地址http://jquery.com/ 
解决方法:将attr换为prop即可,经过验证各个浏览器都是好的,官网说明是在1.6之后建议用prop,在此记录以备后用 
下为效果图 

jquery中checkbox选中的问题之prop&attr惹的祸的更多相关文章

  1. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  2. jQuery获取checkbox选中项等操作及注意事项

    jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...

  3. JQuery中checkbox选择器

    今天我们讲的是如何选择HTML网页中CheckBox选择器 如下图,是几个checkbox <input type='checkbox'checked="checked"/& ...

  4. JQuery设置checkbox选中或取消等相关操作

    $("[name='checkbox']").attr("checked",'true');//全选 $("[name='checkbox']&quo ...

  5. jQuery对checkbox选中和取消选中操作

    最近做项目发现jQuery对checkbox的全选和非全选操作只有第一次生效,以后就不生效了,不知道是不是jQuery版本库的问题,最终找到了一个解决方案: 把原来的下面这两句: $('input') ...

  6. jquery中checkbox的选中,反选,全不选 注意1.6版本以上将attr改成prop

    <script type="text/javascript"> $(function () { // 全选 $("#btnCheckAll").bi ...

  7. jQuery控制checkbox选中状态但是不显示选中

    问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选 中状态. 问题代码: function chooseA ...

  8. jquery中CheckBox的checked状态用attr()的问题

    写了一个脚本,点按钮时选中checkbox,前几次可以选中,多点几次发现checkbox并未选中,调试后发现checked状态根本没有改变,后在网上查证与attr()函数有关,后改为prop问题解决. ...

  9. Jquery判断checkbox选中状态

    jQuery v3.3.1 <input type="checkbox" id="ch"> 判断 $('#ch').is(':checked'); ...

随机推荐

  1. jconsole的使用

    1.首先添加java运行参数: -Xms256m -Xmx1024 -Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port ...

  2. 读javascript高级程序设计08-引用类型之Global、Math、String

    一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...

  3. 深入理解JS闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  4. iOS开发UI篇—多控制器和导航控制器简单介绍

    iOS开发UI篇—多控制器和导航控制器简单介绍 一.多控制器 一个iOS的app很少只由一个控制器组成,除非这个app极其简单.当app中有多个控制器的时候,我们就需要对这些控制器进行管理 有多个vi ...

  5. iOS开发网络篇—文件的上传

    iOS开发网络篇—文件的上传 说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代 ...

  6. 收藏的牛人的Backbone分享教程

    http://yujianshenbing.iteye.com/category/256978 感谢御剑神兵,目前正在看,为源码分析做准备. 今天是2015年4月13号,看了前两篇,

  7. Android Studio的一些快捷键

    以下这些也是百度的其他人整理的.后面有新的会加进来. AS的快捷键容易和QQ,微信等冲突,可以手动关掉或者修改其他软件的热键 Ctrl+G / Ctrl+Alt+Shift+G:查询变量或者函数或者类 ...

  8. 在文章没有缩略图的时候,如何去掉织梦官方的 DEDECMS无缩略图 图片

    1.打开 list_article.htm.2.替换代码 将 [field:array runphp='yes']@me = (empty(@me['litpic']) ? “<a href=’ ...

  9. HDU 5669 线段树优化建图+分层图最短路

    用线段树维护建图,即把用线段树把每个区间都标号了,Tree1中子节点有到达父节点的单向边,Tree2中父节点有到达子节点的单向边. 每次将源插入Tree1,汇插入Tree2,中间用临时节点相连.那么T ...

  10. Oracle PL/SQL入门语法点

    PL_SQL:带有分支和循环,面向过程匿名块:declare(可选,声明各种变量和游标的地方)begin(必要的,从此开始执行)exception(抓取到异常后执行的)end;[sql] view p ...