jquery checkbox选中状态以及实现全选反选
jquery1.6以下版本获取checkbox的选中状态:
$('.ck').attr('checked');
$('.ck').attr('checked',true);//全选
$('.ck').removeAttr('checked');//全不选
发现,以上代码,无论input checkbox是选中还是未选中状态,无论IE还是Chrome,返回结果都是undefinded;
查阅发现:jquery1.6版本对此作了修改,checked属性在页面初始化的时候就已经初始化好了,不会随着状态改变而变。也就是说checkbox在页面加载完毕是选中状态,则永远返回checked,如果一开始没被选中,则永远返回undefinded。
jquery1.6及以上版本获取checkbox的选中状态:
$('.ck').prop('checked');
$('.ck').prop('checked',true);//选中
$('.ck').prop('checked', function(i, attr){return !attr;});//反选
突然想到,可以通过反选实现c/s系统中的RadioBox的单选框功能,如下:
<div>
<li style="margin: 5px; float: left; min-width:200px;min-height:24px;">
<input class="ckbox" id="ck_0" type="checkbox" checked /><label for="ck_0">是</label><!--默认选中css样式参考http://www.csscheckbox.com/checkboxes/1/-->
</li>
<li style="margin: 5px; float: left; min-width:200px;min-height:24px;">
<input class="ckbox" id="ck_1" type="checkbox" /><label for="ck_1">否</label>
</li>
</div>
JS实现单选控制如下:
//这儿实现的只针对两个checkbox的情况,多个checkbox自由发挥呗
$('.ckbox').click(function () {
$('.ckbox').not($(this)).prop('checked', function (i, attr) { return !attr; });//除自身外反选
});
效果如下图:

在Jquery 1.6及之后,新加了一个方法prop(),通过attr方法去获得属性,通过prop方法去获得特性。在遇到要获取或设置checked,selected,readonly和disabled等属性时,用prop方法。
官方解释prop():获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么,什么时候使用attr(),什么时候使用prop()?
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
以下是官方建议attr(),prop()的使用:
|
Attribute/Property |
.attr() |
.prop() |
|
accesskey |
√ |
|
|
align |
√ |
|
|
async |
√ |
√ |
|
autofocus |
√ |
√ |
|
checked |
√ |
√ |
|
class |
√ |
|
|
contenteditable |
√ |
|
|
draggable |
√ |
|
|
href |
√ |
|
|
id |
√ |
|
|
label |
√ |
|
|
location ( i.e. window.location ) |
√ |
√ |
|
multiple |
√ |
√ |
|
readOnly |
√ |
√ |
|
rel |
√ |
|
|
selected |
√ |
√ |
|
src |
√ |
|
|
tabindex |
√ |
|
|
title |
√ |
|
|
type |
√ |
|
|
width ( if needed over .width() ) |
√ |
jquery checkbox选中状态以及实现全选反选的更多相关文章
- jquery checkbox选中状态
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 简单的jquery表单验证+添加+删除+全选/反选
//布局 <body> <h4><a href="#">首页</a>><a href="#"> ...
- JQuery 更改属性 JQ对象循环 each 全选反选 三元运算
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- 使用JQuery获取被选中的checkbox的value值 以及全选、反选
以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> & ...
- 前端开发学习之——使用jquery/javascript判断及改变checkbox选中状态
一.使用jquery判断及改变checkbox选中状态 1.使用JQuery判断一个checkbox 是否为选中: (1).attr('checked) 看JQuery版本1.6+返回:”checke ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
随机推荐
- DFS中的奇偶剪枝(技巧)
剪枝是什么,简单的说就是把不可行的一些情况剪掉,例如走迷宫时运用回溯法,遇到死胡同时回溯,造成程序运行时间长.剪枝的概念,其实就跟走迷宫避开死胡同差不多.若我们把搜索的过程看成是对一棵树的遍历,那么剪 ...
- Java中的基本数据类型包装类
在 java 中为什么会有基本数据类型的包装类? ①:基本数据类型之间的相互转换不是都可以制动转换的,而你强制转换又会出问题,比如String类型的转换为int类型的,那么jdk为了方便用户就提供了相 ...
- DDB与DIB
DB与DIB的区别是什么?觉得书上介绍的有点抽象.不容易理解.他们两者之间的区别的“物理意义” [“现实意义”]——姑且这么叫吧,呵呵!被这个问题困扰了很久,所以今天决定好好查资料总结一下,把它彻底搞 ...
- 自定义类属性设置及setter、getter方法的内部实现
属性是可以说是面向对象语言中封装的一个体现,在自定义类中设置属性就相当于定义了一个私有变量.设置器(setter方法)以及访问器(getter方法),其中无论是变量的定义,方法的声明和实现都是系统自动 ...
- PokeCats开发者日志(十)
现在是PokeCats游戏开发的第三十三天的中午,收到了中国版权保护中心软件登记部发来的受理通知书. 上易版权看一眼,貌似离拿证不远了. 想一想还有点小激动呢!
- 数字证书认证这点事, SSL/TLS,OpenSSL
1.概念 数字证书 HTTPS请求时,Server发给浏览器的认证数据,用私钥签名,并且告诉浏览器公钥,利用公钥解密签名,确认Server身份. 证书还会指明相应的CA,CA能确认证书是否真的是CA颁 ...
- 判断集合不为空Java
list.size>0判断集合size是否大于0 list.isEmpty()判断集合是否为空,返回布尔值
- 【Python】python基础语法 编码
编码 默认情况下,python以UTF-8编码,所有的字符串都是Unicode字符串,可以为代码定义不同的的编码. #coding:UTF-8 #OR #-*- coding:UTF-8 -*- p ...
- asp.net AES加密跟PHP的一致,将加密的2进制byte[]转换为16进制byte[] 的字符串获得
<?php class AESUtil { public static function encrypt($input, $key) { $size = mcrypt_get_block_siz ...
- [NOI2006]网络收费
题面在这里 description 一棵\(2^n\)个叶节点的满二叉树,每个节点代表一个用户,有一个预先的收费方案\(A\)或\(B\); 对于任两个用户 \(i,j(1≤i<j≤2^n)i, ...