attr()与prop()之全选、反选问题
获取js dom原生属性的时候最好用prop()方法,获取自己添加的属性时用attr()
原文:http://blog.sina.com.cn/s/blog_bf5ce8cc0102vuyt.html
判断是否选中
代码如下:
$('#checkbox').prop('checked')
设置选中与不选中状态:
代码如下:
$('#checkbox').attr('checked',true)$('#checkbox').attr('checked',false)
但此方法在jquery1.9.1中,有些处理不一样
IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现但是当通过代码清除选中,下次再通过代码 $('#checkbox').attr('checked',true) 去选中时虽然代码中有checked='checked',但是画面表现都没有打勾。IE8,IE6下无此问题。
后来查询了相关的资料,发现现在attr('checked',true)都换成prop('checked',true);
jquery1.6中新加了一个方法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();项目中jquery升级的时候大家要注意这点!
以下是官方建议attr(),prop()的使用:
attr()与prop()之全选、反选问题的更多相关文章
- 关于input全选反选恶心的异常情况
上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...
- jQuery实现全选/反选和批量删除
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- Jquery 1.8全选反选删除选中项实现
JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...
- checkbox、全选反选,获取值
<input id="Chk_All" onclick="CheckAll()" type="checkbox" /> < ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
随机推荐
- ArcGis10.2破解教程
ArcGis10.2下载地址: https://pan.baidu.com/s/15s5ki_8gf0_732br6h43Hw 破解步骤: 1.完成License Manager的安装. 2.将破解文 ...
- [转] CentOS7 用 kubeadm 快速安装 Kubernetes v1.13.4 最新教程
[转 + 编辑][From] https://www.jianshu.com/p/4d61f18bc62d , https://www.jianshu.com/p/5ff6e26d1912 时间是2 ...
- follow up2-20190426
406. Minimum Size Subarray 同向双指针 https://www.lintcode.com/problem/minimum-size-subarray-sum/descript ...
- vue遇见better-scroll
better-scroll better-scroll 是一款重点解决移动端(现已支持 PC 端)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscr ...
- 关于dubbo调度时出现Request processing failed; nested exception is com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method insertTestTb in the service cn.cuibusi.core.service.TestTbService.的解决办法
在用dubbo跨项目调度service时出现如下错误: 错误原因:pojo没有实现序列化 解决方法:在pojo实现序列化接口即可
- maven上传源码到私服
上传源码 项目中采用了分模块的方式构建,直接将maven-source-plugin写到父pom中,尝试了很多次发现源码一直不能上传到私服中,纠结了很长时间才发现原来多模块项目和普通一个项目的配置是有 ...
- IE haslayout的理解与bug修复
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout 什么是 haslayout ? ...
- html中设置textbox的宽和高
1.宽:width是不行的,而应该用size size=30,表示能输入30个字符 2.高: style="height:50px"
- url解码
最近在做流量分析的项目.需要将url解码.写了个代码,先存一下,有时间再仔细写写. #include <stdio.h> #include <stdlib.h> #includ ...
- spring 线程异步执行
多线程并发处理起来通常比较麻烦,如果你使用spring容器来管理业务bean,事情就好办了多了.spring封装了Java的多线程的实现,你只需要关注于并发事物的流程以及一些并发负载量等特性,具体来说 ...