脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery checkbox选中问题之prop与attr

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无须浏览实现直接下载文件

    这篇文章介绍了Jquery无须浏览实现直接下载文件的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • jQuery实现拖拽页面元素并将其保存到cookie的方法

    jQuery实现拖拽页面元素并将其保存到cookie的方法

    这篇文章主要介绍了jQuery实现拖拽页面元素并将其保存到cookie的方法,涉及jQuery基于cookie针对页面元素属性的相关保存操作技巧,需要的朋友可以参考下
    2016-06-06
  • jQuery超酷平面式时钟效果代码分享

    jQuery超酷平面式时钟效果代码分享

    这篇文章主要介绍了jQuery制作的超酷平面式时钟效果，把日期和时间通过横向刻度条展现，推荐给大家，有需要的小伙伴可以参考下
    2015-08-08
  • 再说AutoComplete自动补全之实现原理

    再说AutoComplete自动补全之实现原理

    再说AutoComplete自动补全之实现原理,这里以asp.net后台为主，考虑到性能最好是生成xml并入缓存。
    2011-11-11
  • jquery层次选择器的介绍

    jquery层次选择器的介绍

    今天小编就为大家分享一篇关于jquery层次选择器的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • jQuery实现平滑滚动到指定锚点的方法

    jQuery实现平滑滚动到指定锚点的方法

    这篇文章主要介绍了jQuery实现平滑滚动到指定锚点的方法,实例分析了jQuery根据锚点定位滚动的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • jQuery打字效果实现方法(附demo源码下载)

    jQuery打字效果实现方法(附demo源码下载)

    这篇文章主要介绍了jQuery打字效果实现方法,详细分析了jQuery实现打字效果所涉及的jticker_split.js插件机具体调用技巧,并附带完整的demo源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • jquery.hotkeys监听键盘按下事件keydown插件

    jquery.hotkeys监听键盘按下事件keydown插件

    jquery.hotkeys就是网页是监听用户按键要用到的jquery库，这里简单介绍下使用方法,需要的朋友可以参考下
    2014-05-05
  • 一个基于jquery的图片切换效果

    一个基于jquery的图片切换效果

    一个图片切换效果，胡乱写了一下。貌似doctype到了html4.01下面样式有点问题。
    2010-07-07
  • jQuery鼠标事件总结

    jQuery鼠标事件总结

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,有需要的朋友来了解一下。
    2016-10-10

最新评论