不同版本的jquery的复选框checkbox的相关问题
在尝试写复选框时候遇到一个问题,调试了很久都没调试出来,极其郁闷:
IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现
但是当通过代码清除选中,下次再通过代码 $('#checkbox').attr('checked',true) 去选中时
虽然代码中有checked='checked',但是画面表现都没有打勾。
例如如下的代码:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//全选
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked', true);
});
//全不选
$("#CheckedNo").click(function(){
$('[type=checkbox]:checkbox').attr('checked', false);
});
}) </script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/> <input type="button" id="send" value="提 交"/>
</form>
</body>
</html>
后来查了查资料,发现在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下:
判断是否选中
$('#checkbox').prop('checked')
设置选中与不选中状态:
$('#checkbox').attr('checked',true)
$('#checkbox').attr('checked',false)
但此方法在jquery1.9.1及其以后的版本中,就会出现如上文所示的问题,
后来查找相关的资料,发现现在attr('checked',true)都换成prop('checked',true)
prop()获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法. 区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。
这个布尔型的属性,再解释一下,是属性值只有true|false的属性。
还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
参考:http://blog.sina.com.cn/s/blog_655388ed01017cnc.html
不同版本的jquery的复选框checkbox的相关问题的更多相关文章
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- jquery判断复选框checkbox是否被选中
jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');
- jquery操作复选框(checkbox)十二技巧
jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- jquery获取复选框checkbox的值
jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...
- Jquery操作复选框(CheckBox)的取值赋值实现代码
赋值 复选框 CheckBox 遍历 取值 1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...
- jQuery 操作复选框(checkbox) attr checked不起作用
参考资料 http://www.paobuke.com/develop/javascript/pbk849.html 这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...
- jquery操作复选框(checkbox)的一些小技巧总结
1.获取单个checkbox选中项(三种写法) //第一种 $("input:checkbox:checked").val() //第二种 $("input:[type= ...
- jQuery——操作复选框(checkbox) attr checked不起作用
这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 attr(‘checked’,'checked’);与attr(‘checked’,true); 都不好使,要么第一次成 ...
随机推荐
- Codeforces Round #337 (Div. 2) A水
A. Pasha and Stick time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- 字符串模式匹配算法--BF和KMP详解
1,问题描述 字符串模式匹配:串的模式匹配 ,是求第一个字符串(模式串:str2)在第二个字符串(主串:str1)中的起始位置. 注意区分: 子串:要求连续 (如:abc 是abcdef的子串) ...
- LAMP环境介绍
LAMP简介: Lamp是一组常用于来搭建动态网站或者服务器的开源软件平台,Linux apache mysql perl或php. Linux :提供操作系统 Apache:Web服务器 Mysql ...
- 【算法日记】2.算法中的大O符号
大O符号是一种算法复杂度的相对表示方式. 1.大O表示算法的操作数,表示出算法运行的快慢 2.大O表示法指出了最糟糕情况下的运行时间,例如 简单查找的运行时间O(n),意味着在最糟糕的情况下,必须运行 ...
- 51Nod 1013 3的幂的和 快速幂 | 乘法逆元 | 递归求和公式
1.乘法逆元 直接使用等比数列求和公式,注意使用乘法逆元 ---严谨,失细节毁所有 #include "bits/stdc++.h" using namespace std; #d ...
- NOJ/HUST 1095 校赛 Just Go 线段树模板题
Description There is a river, which contains n stones from left to right. These stones are magic, ea ...
- [cerc2012][Gym100624A]20181013
A 题意:n(n<=20)个国家,每个国家之间有一些债务关系,总体为负债的国家会破产,破产国家的债务关系全部消除.问哪些国家可能成为最后一个唯一存在的国家. 题解: 对于每一个状态,面对若干个负 ...
- google protobuf序列化原理解析 (PHP示例)
一.简介 Protocol Buffers是谷歌定义的一种跨语言.跨平台.可扩展的数据传输及存储的协议,因为将字段协议分别放在传输两端,传输数据中只包含数据本身,不需要包含字段说明,所以传输数据量小, ...
- 解决java在对MySQL插入数据时出现乱码问题
1.在连接数据库的时候请注意, 最使用连接连接数据库的时候,必须在后面追加上编码的设置:useUnicode=true&characterEncoding=UTF-8,如下图所示. 参考连接: ...
- z-index 不起作用
1.第一种情况(z-index无论设置多高都不起作用情况): 这种情况发生的条件有三个: 1.父标签 position属性为relative: 2.问题标签无position属性(不包括static) ...