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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
解读Vue组件注册方式
May 15 Vue.js
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
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python入门_条件控制(详解)
2017/05/16 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python爬豆瓣电影实例
2018/02/23 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
幼儿园教师个人反思
2014/01/30 职场文书
大学学习计划书范文
2014/05/02 职场文书
银行业务授权委托书
2014/10/10 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
详解JVM系列之内存模型
2021/06/10 Javascript
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript