关于JQuery的单选框的全选问题解决—prop()方法和attr()的区别_综合

由于attr()只是针对一般属性，不适合checked、selected、readonly这种的，所以需要用另一种方法来写checked属性的事件。
这种方法就是用prop():

一、定义和用法

prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。
二、语法

返回属性的值：
$(selector).prop(property)设置属性和值：
$(selector).prop(property,value)使用函数设置属性和值：
$(selector).prop(property,function(index,currentvalue))设置多个属性和值：
$(selector).prop({
    property:value, property:value,...})

在这里插入图片描述
prop() 和 attr() 可能返回不同的值。
例如：当用于返回复选框的 “checked” 状态时的不同。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    $("#p1").html("attr('checked'): " + $("input").attr('checked')+ "<br>prop('checked'): " + $("input").prop('checked'));});
});
</script>
</head>
<body><p><b>注意:</b>确认或取消选中该复选框,然后单击按钮刷新内容。</p>
<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p1"></p></body>
</html>

运行结果：
在这里插入图片描述

总结：
attr(“checked”)：返回的是checked或undefine (返回属性)
prop(“checked”)：返回的是true或false （返回属性值）

二、实现全选功能

$(function(){
    $("#selectAll").change(function(){
    $("[name='chk']").prop("checked",$(this).prop("checked"));});});

补充：
prop 和 attr 均可获取属性值，但 prop 不扫描源码来获取而是根据页面的信息。
比如：

<img src="https://www.runoob.com/images/pulpit.jpg" />
该图片的实际宽度为 284。

如果页面只有这一张图片，那么 $(“img”).attr(“width”) 将返回 undefined，因为页面源代码中没有设置 width 属性。
但是用 $(“img”).prop(“width”) 可返回 284，因为浏览器直接显示图片的实际宽度，用户实际看到的宽度就是 284。

理论上，prop 更快。但很遗憾，它是扫描浏览器所实际显示的数据，仅可用于浏览器可识别的属性。比如：

由于 tinyval 并非HTML标准属性，因此 $("p").prop("tinyval") 无法获取到任何值。

但 attr 不受限制。$(“p”).attr(“tinyval”) 会扫描源码并获取到 “12” 的结果。
因此，如果您明白代码将做什么，建议使用 attr，它应当能提供更好的重用性和兼容性。