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选中状态以及实现全选反选的更多相关文章

  1. jquery checkbox选中状态

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 简单的jquery表单验证+添加+删除+全选/反选

    //布局 <body> <h4><a href="#">首页</a>><a href="#"> ...

  3. JQuery 更改属性 JQ对象循环 each 全选反选 三元运算

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  5. 使用JQuery获取被选中的checkbox的value值 以及全选、反选

    以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> & ...

  6. 前端开发学习之——使用jquery/javascript判断及改变checkbox选中状态

    一.使用jquery判断及改变checkbox选中状态 1.使用JQuery判断一个checkbox 是否为选中: (1).attr('checked) 看JQuery版本1.6+返回:”checke ...

  7. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  9. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

随机推荐

  1. 《梦断代码Dreaming In Code》阅读笔记(二)

    这段时间一口气读了5章,所以想着现在一块写阅读笔记. 在阅读的这段时间,我一直是晚上进行阅读,很多时候都是读完一看已经一个小时了,效果还不错.闲话不表,说说阅读心得. 关于底层语言或是低级语言,我之前 ...

  2. lintcode-13-字符串查找

    字符串查找 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source 字符串中找出 target 字符串出现的第一个位置(从0开始).如果不存在,则返回 -1. 说明 ...

  3. matlab的二维卷积操作(转)

    MATLAB的conv2函数实现步骤(conv2(A,B)): 其中,矩阵A和B的尺寸分别为ma*na即mb*nb ① 对矩阵A补零,第一行之前和最后一行之后都补mb-1行,第一列之前和最后一列之后都 ...

  4. windows批处理学习(字符换操作)---04

    转自:https://www.cnblogs.com/DswCnblog/p/5432326.html 1.截取字符串 截取字符串可以说是字符串处理功能中最常用的一个子功能了,能够实现截取字符串中的特 ...

  5. arp_filter/arp_ignore/rp_filter

    下面这段代码应该是arp_ignore/arp_filter的最好的注脚;在ARP_ignore通过的情况下,我再去判断ARP_filter,这个ARP_filter其实就是为了判断,当数据包再出去的 ...

  6. Delphi Dataset CurValue

    TField.CurValue Property Represents the current value of the field component including changes made ...

  7. delphi怎样单步调试

    在delphi的IDE编辑窗口里,主菜单->Run->Step Over或者主菜单->Run->Trace Into单步调试有两种方式:一种是Step Over,快捷键是F8, ...

  8. IO复用、多进程和多线程三种并发编程模型

    I/O复用模型 I/O复用原理:让应用程序可以同时对多个I/O端口进行监控以判断其上的操作是否可以进行,达到时间复用的目的.在书上看到一个例子来解释I/O的原理,我觉得很形象,如果用监控来自10根不同 ...

  9. Python 配置日志的几种方式

    Python配置日志的几种方式 作为开发者,我们可以通过以下3种方式来配置logging: (1)使用Python代码显式的创建loggers,handlers和formatters并分别调用它们的配 ...

  10. P1086 花生采摘

    题目描述 鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着一张小小的纸条:“欢迎免费品尝我种的花生!――熊字”. 鲁宾逊先生和多多都很开心,因为花生正是他 ...