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()的使用:

时间: 2024-10-28 18:50:57

attr()与prop()之全选、反选问题的相关文章

JQuery实现列表中复选框全选反选功能封装

JQuery实现列表中复选框全选反选功能封装 我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: 1 $(':checkbox[data-check-target]').click(function () { 2

js 实现全选反选

最近在做一个js特效:全选,反选. 效果能实现,可是只执行了一次.多次点击,发现效果不能触发了.后来查了些文档,才了解是  attr  跟 prop 的区别! 代码直接贴出来: ($("#全选ID").attr("checked") 的返回值 就是  true/false )  attr只能运行一次:   function checked_all(){                            $("input[name='XXX']:chec

Jquery 1.8全选反选删除选中项实现

JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () { $('input[type=checkbox]').prop('checked', $(this).prop('checked')); }); 找到选中项的JQ代码: $("input:[type='checkbox'][checked]") JQ1.6以下的全选反选效果: if (

分享知识-快乐自己:复选框、全选/反选/获取值

1):复选框 全选与反选 .获取选中的值 取消选中的框 1.全选/反选 <body> <input type="checkbox" checked> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox">

jquery实现全选/反选功能

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多选框全选/反选</title> <script src="http://res01.xesimg.com/jquery/jquery.min.js">&l

checkbook全选/反选/全不选

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><ul id="list"> <li><label><input type="checkbox"

jquery 全选 反选 取消 批量删除

首选引入jquery 全选 //全选 function myall(){ $("input[name='d[]']").each(function(index,e){ $(this).prop('checked',true); }); } 取消 //当true改为false时为取消 // function no(){ // $("input[name='d[]']").each(function(index,e){ // $(this).prop('checked'

jquery全选反选

//全选反选$(document).on("click",".all",function(){    if($(".all").is(":checked")){        $(".bll checkbox").prop("checked", true);    }else    {        $(".bll checkbox").prop("chec

jQuery实现checkbox(复选框)选中、全选反选代码

谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr