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

今晨,漂亮的测试妹妹提了个奇怪的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()二次勾选问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, checkbox
attr
jquery checkbox attr、checkbox attr、checkbox removeattr、checkbox attr value、duilib checkboxattr,以便于您获取更多的相关知识。

时间: 2016-07-22
Tags: jquery, checkbox, attr

jquery checkbox无法用attr()二次勾选问题的解决方法_jquery的相关文章

Jquery修改image的src属性,图片不加载问题的解决方法_jquery

1. 当点击某一按钮的时候,把图片域中的图片改变一下 <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" /> <span style="cursor:hand" onclick="reflush();return false;">看不清</span> &l

Jquery对新插入的节点 绑定Click事件失效的解决方法_jquery

1.有人说用 Live, 事实上现在最新的Jquery已经不支持 Live 了.live的解决方法如下: 你可以看这个 也可以不看 ,只是做到心中有数就可以了.下面介绍ON的方法. live:Live的使用介绍 2.有人用了ON 来解决, 这个解决方法基本在理. On :On的介绍,能解决问题 On的方法,基本能解决问题,但是你也要根据你的具体情况做选择.并不是每个人的代码都像上面这个案例描述的那么简单.但是万变不离其宗. 我是这样来做的,最终把问题解决了.  我有一个UL 标签是静态的,就是说

jquery中checkbox全选失效的解决方法_jquery

如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值.推荐使用上述方法之一,来取得 checked 的值. 使用jQu

jQuery UI Datepicker length为空或不是对象错误的解决方法_jquery

我们开发ASP.NET站点时,如果将jQuery UI Datepicker与ASP.NET的验证控件(如:RequiredFieldValidator)组合使用: 复制代码 代码如下: <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="reqDate" runat="server&

jquery在ie7下选择器的问题导致append失效的解决方法_jquery

1,有如下这样一段html 复制代码 代码如下: <div class="right"id="pending">  <table class="one"width="100%"border="0"cellspacing="0"cellpadding="0"> <tbody> </tbody> </table>

JQuery 1.3.2以上版本中出现pareseerror错误的解决方法_jquery

感觉很莫名奇妙,前一阵子还好好的,怎么现在就突然报错了? 程序根本没动.于是开始跟踪分析,请求.返回的内容...最后判断是jquery 不承认返回的内容是json格式.当时返回的内容是: 复制代码 代码如下: {'keylist':[ {'tid':'13',"sumnum':'1'},{'tid':'21','sumnum':'1'} ]} 经过仔细检查也没发现任何问题,返回流的字符已经设成utf-8,内容用ff检测,ff也能识别成json格式,但此时还是报"pareseerror&

jquery mobile页面跳转后样式丢失js失效的解决方法_jquery

用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 方法: 将当前页面b.html需要用到的css以及js放在<page>div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<page>外的js和css都失效了.

wpf mvvm 模式的datagrid控件模板列的列头里的checkbox怎么在viewmodel里撤销勾选状态

问题描述 wpfmvvm模式的datagrid控件模板列的列头里的checkbox怎么在viewmodel里撤销勾选状态点击全选,点击下一页分以后全选框还是勾选状态,希望datagrid重新加载数据后模板的全选状态为未勾选, 解决方案 解决方案二:你需要编写勾选的点击事件,绑定只是用来显示而不是做动作处理,mvvm模式也需要后台事件处理的支持的.

combobox-silverlight中 ComboBox里面嵌套CheckBox怎么绑定数据和获得勾选数据啊?

问题描述 silverlight中 ComboBox里面嵌套CheckBox怎么绑定数据和获得勾选数据啊? silverlight中 ComboBox里面嵌套CheckBox怎么绑定数据和获得勾选数据啊?,望大神们指导