jQuery checkbox选中问题之prop与attr注意点分析

更新时间：2016年11月15日 14:18:23 作者：陈达辉

这篇文章主要介绍了jQuery checkbox选中问题之prop与attr注意点,结合form表单实例形式分析了针对火狐浏览器下checkbox失效情况的处理技巧,需要的朋友可以参考下

本文实例分析了jQuery checkbox选中问题之prop与attr注意点。分享给大家供大家参考，具体如下：

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

<!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相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jquery图片切换插件
本文给大家分享的是一则使用jQuery实现图片切换的插件，效果非常不错，兼容性也很好，推荐给大家，有需要的小伙伴快来参考下吧。
2015-03-03
jquery表单验证插件validation使用方法详解
这篇文章主要为大家详细介绍了jquery表单验证插件validation使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
基于jquery ui的alert,confirm方案（支持换肤）
这篇文章主要介绍了基于jquery ui的alert,confirm方案（支持换肤），修改自网友的源码，有需要的小伙伴参考下。
2015-04-04
详解jQuery中的事件
jQuery增加了并扩展了基本的事件处理机制，不但提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力。本文将对此进行详细介绍，需要的朋友一起来看下吧
2016-12-12
ajax与json 获取数据并在前台使用简单实例
这篇文章主要介绍了ajax与json 获取数据并在前台使用简单实例的相关资料,需要的朋友可以参考下
2017-01-01
基于jquery的滚动新闻列表
在网上看到许多的jquery插件实现滚动新闻，特别是新闻显示在div里面的，比较了一番发现这款jquery.vticker-min.js还是挺不错的，于是就将它集成到我的毕业设计里面。
2010-06-06
jquery.validate提示错误信息位置方法
这篇文章主要介绍了jquery.validate提示错误信息位置方法,实例分析了jquery.validate实现提示错误信息位置的相关技巧,需要的朋友可以参考下
2016-01-01
js jquery做的图片连续滚动代码
有bug..点到后面的图片后,再返回 ..... 问题出现了...
2008-01-01
jQuery 全选效果实现代码
利用jquery实现的全选效果代码，实际上我感觉直接用js好像更容易些。不过这样对于jquery的操作可以更熟悉。
2009-03-03
基于jQuery实现数字滚动效果
本文主要分享了基于jQuery实现数字滚动效果的示例代码，附源码下载。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01