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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
javascript常用功能汇总
Jul 05 Javascript
论JavaScript模块化编程
Mar 07 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
全面理解闭包机制
Jul 11 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
js+css3实现炫酷时钟
Aug 18 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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
Cookie 小记
2010/04/01 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Python中List.index()方法的使用教程
2015/05/20 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
python3 简单实现组合设计模式
2020/07/02 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
高三物理教学反思
2016/02/20 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
css3 选择器
2022/05/11 HTML / CSS