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.方便 ...
随机推荐
- JDK下载与安装、 Eclipse下载与使用的总结心得_20173311118_牛明旺
一.JDK下载与安装心得: ① 从官网http://www.oracl.com/technetwork/java上下载JDK,注意一定要同意该网站上的协议,否则下载不了(即点击“Accept Lic ...
- 初学struts2框架
昨天初学strts2,折腾了一晚上才正好一个简单的应用程序,在这个过程中遇到了很多的问题. 1. struts2的更新太快,所以从图书馆借的书常常会跟不上变化,所以有时执行起来会很麻烦. 2. 如果你 ...
- Python 全栈开发:str(字符串)索引和切片
str(字符串)索引和切片 str(字符串)索引: #计算机中大部分索引以0为开始 s = 'mylovepython' s1 = s[0] s2 = s[4] s3 = s[-1] print(s1 ...
- dwz+ssh Http status: 200 OK
问题描述,用超链接跳转页面的时候报这个错,原因是超链接的target没有设置对, 跳转页面应该用 target="navTab", 我原先用 target="navTab ...
- 【NOI2019十二省联合省选】部分题简要题解
Day 1 T1 异或粽子 题意:给出一个长为n的序列,选择K个不完全重合的区间使得每个区间的异或值的总和最大. 题解:先做一个前缀异或和,对于每一个右端点我们记录三元组(l,r,x)表示在左端点在\ ...
- Linux常用快捷键、文件管理和查询
有话要说 为什么要用Linux?要用Linux的原因太多,想说说不完啊.如果你说用Linux只是为了装逼,那证明你真的还很菜.不排除有装逼了因素,那也只占非常少的比例,可以忽略不计.我们反问一下,为什 ...
- 静态类和静态方法,抽象类和抽象方法,new关键字,值类型和引用类型,接口
静态类和静态方法:静态成员是与类相关,而非实例相关:普通类中的静态成员:1.只能通过类名访问.2.静态方法中只能访问静态成员,或通过对象访问实例成员.3.多个对象共享同一个成员.静态类(一般用作工具类 ...
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- Maven仓库汇总
来源:http://tianya23.blog.51cto.com/1081650/386908 1.maven 仓库地址: 共有的仓库http://repo1.maven.org/maven2/ht ...
- python-五个面试题
问题一:以下的代码的输出将是什么? 说出你的答案并解释. class Parent(object): x = 1 class Child1(Parent): pass class Child2(Par ...