jquery checkbox无法用attr()二次勾选问题的解决方法


Posted in Javascript onJuly 22, 2016

今晨,漂亮的测试妹妹提了个奇怪的bug,说我一功能checkbox时隐时现,比如第一次打开有勾选,第n次打开可能就不选了。

想到与美女有亲密接触机会,马上鸡动起来。

经过偶层层抽次剥茧(da da jiang you),终于知道了原因:attr()在二次选中勾选框时,失效。

比如,如下HTML页面,一点【选中】、二点【取消选中】、三点【选中】,瞧,不行了呗。

1.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>prop demo</title>
 <style>
 img {
  padding: 10px;
 }
 div {
  color: red;
  font-size: 24px;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
 <input type="checkbox" checked="checked">
 <input type="checkbox">
 <input type="checkbox">
 <input type="checkbox" checked="checked">
 
<script>
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
 return !val;
});
</script>
 
</body>
</html>

解决方案,是使用prop()替换attr()方法(在Jquery1.6以上),如下代码:

2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attr checked</title>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<script type="text/javascript">
  function switchChecked(flag) {
    $("input[type='checkbox']").prop('checked', flag);
  }
</script>
</head>
<body>
  <input type="checkbox" />
  <input type="button" onclick="switchChecked(true)" value="选中">
  <input type="button" onclick="switchChecked(false)" value="取消选中">
</body>
</html>

关于官方文档,见:http://api.jquery.com/attr/

或者http://api.jquery.com/prop/

摘抄如下:“As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.”

以上这篇jquery checkbox无法用attr()二次勾选问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
vue地区选择组件教程详解
May 04 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 #Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 #Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 #Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 #Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 #Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 #Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 #Javascript
You might like
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jquery对表单操作2
2011/04/06 Javascript
JS重要知识点小结
2011/11/06 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
vue组件的写法汇总
2018/04/12 Javascript
基于python编写的微博应用
2014/10/17 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python解析最简单的验证码
2016/01/07 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
在python中使用nohup命令说明
2020/04/16 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
美国羊皮公司:Overland
2018/01/15 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
北京振戎融通Java面试题
2015/09/03 面试题
毕业生找工作推荐信
2013/11/21 职场文书
2014年村官工作总结
2014/11/24 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
小学三年级作文之写景
2019/11/05 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python