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


Posted in Javascript onNovember 15, 2016

本文实例分析了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 checkbox选中问题之prop与attr注意点分析

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

Javascript 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
用javascript实现分割提取页面所需内容
May 09 Javascript
jquery随机展示头像代码
Dec 21 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 #Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 #Javascript
禁用backspace网页回退功能的实现代码
Nov 15 #Javascript
sea.js常用的api简易文档
Nov 15 #Javascript
js实现倒计时及时间对象
Nov 15 #Javascript
Bootstrap简单表单显示学习笔记
Nov 15 #Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 #Javascript
You might like
跟我学Laravel之请求与输入
2014/10/15 PHP
php实现可逆加密的方法
2015/08/11 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
JScript的条件编译
2007/05/29 Javascript
Track Image Loading效果代码分析
2007/08/13 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
python操作xml文件详细介绍
2014/06/09 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python各种excel写入方式的速度对比
2020/11/10 Python
汽车驾驶求职信
2013/10/25 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
英语自我评价范文
2014/01/24 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Django实现聊天机器人
2021/05/31 Python
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL