文档章节

jquery attr prop checkbox已有checked=checked但不显示勾选问题

梅气灶
 梅气灶
发布于 2015/08/12 18:10
字数 592
阅读 2455
收藏 4

        最近在做项目的过程中碰到了这样的一个问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个时候将选中的状态缓存起来,然后点击模态框中的关闭按钮,再次点击触发模态框按钮弹出模态框,这个时候问题出现了:

        checkbox标签已有checked=checked但是不显示勾选,查看图片:

        网上也查过有解决方案,就是将   $("...").attr("checked", true)改为$("...").prop("checked", true),问题解决,但是,问题是解决了,那么原因是出现在哪里呢?

        首先来了解下 jquey中的 attr()函数和prop()函数,attr()是处理 attribute的值的,而prop()是处理 property 的值的 ,jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值,那么归根结底,就是在处理 attribute 和 property。

        很多attribute节点有一个相应的property属性,因而attribute和property很容易被混淆在一起,如某个div元素中的id和class既是attribute也有property,不管哪种方式都可以访问和修改,但是对于自定义的attribute节点,或者自定义property,两者就没有关系了(但是在IE6-7中,两者还是一样的,好奇葩的,但愿我们都能早日抛弃IE8以下的),需要注意的是,对于checked特性(attribute)不是对应它checked属性(property),attribute实际对应的是defaultChecked属性,而且仅用于设置复选框最初的值,checked的attribute不会因为复选框的状态而改变,而checked的property会因为复选框的状态而改变,所以在.attr()函数中,就算设置成了.attr("checked", true),也只是用来存储默认或者选中属性的默认值,却并不改变该复选框被选中和选中,这就是为什么   checkbox标签已有checked=checked但是不显示勾选 的原因所在


© 著作权归作者所有

梅气灶
粉丝 30
博文 15
码字总数 20372
作品 0
杭州
前端工程师
私信 提问
加载中

评论(1)

你若安好_那还得了
你若安好_那还得了
对于checked特性(attribute)不是对应它checked属性(property),attribute实际对应的是defaultChecked属性。。。谢谢解决了我的问题。。
0
奇葩问题——jquery操作checkbox的 checked属性

最近做checkbox,遇到一个奇葩问题,如下: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery-1.9.1.js"></......

seth_y
2014/04/16
69
0
jquery版本间兼容性:checkbox选中状态

最近在学习Jquery,发现attr不太好用,从网上搜了下终于知道其原因,记下备查。 以下为以为网友在js贴吧的内容: 以<input type="checkbox" id="all"/>为例子取值的例子 $("#all").attr("ch......

北方攻城师
2014/08/05
260
0
jquery 学习

1.常见的jquery 对象操作 jquery取radio单选按钮的值 $("input[name='items']:checked").val(); jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相......

晨曦之光
2012/03/09
90
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
108
0
JQuery处理checkbox的checked属性正确用法

JQuery处理checkbox选中不选中在各个版本中是不同的。 checkbox在jquery各个版本中操作方式是不同的。总结如下: - 在jquery1.5及其以下的版本中使用 attr("checked") 方法进行操作; - 在j...

夜辰
2015/04/10
375
1

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据教程Scala系列之样例类_Option_偏函数

  好程序员大数据教程Scala系列之样例类_Option_偏函数,在Scala中Option类型样例类用来表示可能存在或也可能不存在的值(Option的子类有Some和None)。Some包装了某个值,None表示没有值。 ...

好程序员官网
18分钟前
3
0
zk中ServerCnxnFactory连接管理工厂

作为ServerCnxn的工厂抽象类 属性 ZOOKEEPER_SERVER_CNXN_FACTORY zookeeper.serverCnxnFactory secure 在ServerCnxnFactory中SSL是否启用 sessionMap session管理配置中信息(sessionId,Ser......

writeademo
19分钟前
3
0
【代码审计01】几种常见的漏洞种类以及代码审计工具

前言 代码审计是在经过黑盒测试完毕,也就是检查应用的基本功能是否符合产品业务需求下进行的。需要有一定的编码基础以及对漏洞形成原理的基本认知,通过工具或者经验检测中代码中可能出现的...

北桥苏
20分钟前
4
0
重磅发布 | 全球首个云原生应用标准定义与架构模型 OAM 正式开源

作者: OAM 项目负责人 导读:2019 年 10 月 17 日,阿里巴巴合伙人、阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应用模型 Open A...

阿里巴巴云原生
22分钟前
3
0
【进阶之定义函数】一个查询树结构数据的集合

1、基本定义 delimiter 自定义符号  -- 如果函数体只有一条语句, begin和end可以省略, 同时delimiter也可以省略create function 函数名(形参列表) returns 返回类型  -- 注意是retru...

卯金刀GG
28分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部