Jquery中prop( )和attr( )的区别和用法

Stella981
• 阅读 888

1.碰到的“坑”

<label>
    <input type="checkbox" class="check-box" id="apple">苹果
    <input type="checkbox" class="check-box" id="banana">香蕉
    <input type="checkbox" class="check-box" id="pear">梨
</label>

假设我们把三个都选中,然后如下调用js想要取消苹果项的选中状态:

$("#apple").attr("checked",false);

结果,没有任何作用!

这就很让我困惑了,到底是为什么呢,checkebox的选中状态下checked=true,那按道理如果把checked设为false的话自然就是取消选中状态啊,道理是这样,没错!然后找原因,首先要知道在选中状态下的checked真的是true吗?试一下:

$("#apple").attr("checked");

得到的结果是undefined!!

到底是哪里出现了问题呢?带着这个疑惑在网上查找了一下,结果找到了prop( )这个方法,说是像复选框的checked是需要prop方法来读取的,而attr是无效的,试一下:

$("#apple").prop("checked");

得到的结果真的是 true!!那么这prop到底是何方神圣呢?让我们来探索一下。

2.何为prop( )方法?

.prop(propertyName)------->>获取匹配的元素集中第一个元素的属性(property)值(添加的版本: 1.6)。

.prop(propertyName,)

.prop()方法只获得_第一_个匹配元素的属性值 。如果元素上没有该属性,或者如果没有匹配的元素。那么该方法会返回undefined值。若要取得每个匹配元素的属性值(property),请使用循环结构,如jQuery .each().map()方法。

_attributes_和_properties_之间的差异在特定情况下是很重要。jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而.attr() 方法返回 attributes 的值。

例如, selectedIndextagNamenodeNamenodeTypeownerDocumentdefaultChecked, 和 defaultSelected应使用.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()方法取得,但是这并不是元素的attr属性。他们没有相应的属性(attributes),只有特性(property)。

例如,考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ,并假设它是一个JavaScript变量命名的elem :

elem.checked

true (Boolean) 将随着复选框状态的改变而改变

$(elem).prop("checked")

true (Boolean) 将随着复选框状态的改变而改变

elem.getAttribute("checked")

"checked" (String) 复选框的初始状态;不会改变

$(elem).attr("checked") (1.6)

"checked" (String) 复选框的初始状态;不会改变

$(elem).attr("checked") (1.6.1+)

"checked" (String) 将随着复选框状态的改变而改变

$(elem).attr("checked") (pre-1.6)

true (Boolean) 将随着复选框状态的改变而改变

根据W3C的表单规范 ,在checked属性是一个布尔属性, 这意味着,如果这个属性(attribute)是目前存在, 即使,该属性没有对应的值,或者被设置为空字符串值,或甚至是"false",相应的属性(property)为true。 这才是真正的所有布尔属性(attributes)。

然而,要记住的最重要的概念是checked特性(attribute)不是对应它checked属性(property)。特性(attribute)实际对应的是defaultChecked属性(property),而且仅用于设置复选框最初的值。checked特性(attribute)值不会因为复选框的状态而改变,而checked属性(property)会因为复选框的状态而改变。因此,  跨浏览器兼容的方法来确定一个复选框是否被选中,是使用该属性(property):

  • if ( elem.checked )
  • if ( $(elem).prop("checked") )
  • if ( $(elem).is(":checked") )

对于其他的动态属性,同样是true,比如 selected 和 value.

点赞
收藏
评论区
推荐文章
Easter79 Easter79
2年前
vue input复选框checkbox默认样式纯css修改
<divclass"data_list"vfor"(item,index)indata_list":key"index"<inputtype"checkbox"class"check_boxtuicheckbox":id"'id'item.id":value"item.id"vmodel
浩浩 浩浩
3年前
【Flutter实战】单选框和复选框
3.6单选开关和复选框Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父组件来管理的。当Switch或Checkbox被点击时,会触发它们的onChanged回调,我们可以在此回调中处
Wesley13 Wesley13
2年前
PHP自定义 日期范围 条件筛选
Html:<divclass\"layuiinline"\<labelclass\"layuiformlabel"\登录时间:</label\<divclass\"layuiinputinline"style\"width: 140px;"\<inputtype\"date"name\"date
Stella981 Stella981
2年前
PyQt—QTableWidget中的checkBox状态判断
一、QTableWidget实现checkBox效果利用QTableWidgetItem对象的CheckState属性,既能显示QCheckBox,又能读取状态tableQtGui.QTableWidget()checkBoxQtGui.QTableWidgetItem()checkBox.setCheckSt
Stella981 Stella981
2年前
Spring Boot 2 + Thymeleaf:表单字段绑定、表单提交处理
SpringBoot中Thymeleaf对表单处理的一些用法:(1)使用th:field属性:进行表单字段绑定(2)使用ids对象:一般用于lable配合radio或checkbox使用(3)表单提交处理开发环境:IntelliJIDEA2019.2.2SpringBoot版本:2.1.8新建一个名称为demo的Spr
Stella981 Stella981
2年前
Android CheckBox修改大小、边框颜色,以及自定义CheckBox;
CheckBox修改大小:android:scaleX"0.8"android:scaleY"0.8"CheckBox修改边框颜色,注意不是背景色:android:buttonTint"@color/colorAccent"修改大小和边框颜色:
Stella981 Stella981
2年前
ListActivity中CheckBox的勾选事件处理
这个小例子包含:ListActivity中CheckBox的勾选事件处理,List中Item的单击和长按事件处理,以及在list下方显示一个不随List滚动的Button!(http://static.oschina.net/uploads/space/2013/0125/234312_5jr9_189801.png)当ListActivity中
Stella981 Stella981
2年前
From表单提交的几种方式
<body<formaction"https://my.oschina.net/u/3285916"method"get"name"formOne"id"formId"name:<inputtype"text"name"name"pwd:<inputtyp
Stella981 Stella981
2年前
HTML5新增input标签属性
一.inputtype属性1<formaction""2邮箱<inputtype"email"name""id""<inputtype"submit"value"提交"<br/<br/3手机号码<inputtype"tel"name
Stella981 Stella981
2年前
Flutter入门(五)
\表单classTextFieldDemoextendsStatelessWidget{效果图!(https://oscimg.oschina.net/oscnet/03924702b8cb82283b0d20d37eb8aa3642a.jpg)\CheckBox多选import'pa