实际过程

前段时间同事做了一个页面，效果是这样的

页，面，张，版

当你点击左上角的复选框时，你应该选择下面所有的复选框。我们的代码是这样的

$('input[name='checkbox']')。attr('checked '，true)；但是一点用都没有，然后就变成了这个，好吗

$(function(){ $('#all '))。单击(function(){ if($('#all '))。道具('选中'){ $('input[name='checkbox']')。prop('checked '，true)；} else { $(' input[name=' checkbox ']')。prop('checked '，false)；} });});于是官方文件检查了attr和prop的区别，发现根本无法理解，如下图所示

所以，我们做了一个实验

c 1: input id=' C1 ' name=' checkbox ' type=' checkbox ' checkbox ' checking=' checking '/br c 2: input id=' C2 ' name=' checkbox ' type=' checkbox ' checkbox ' checkbox ' checking='//br c 43360 input id=' C4 ' name=' checkbox ' type=' checkbox ' checkbox ' checking//br c 5: input id=' C5 ' name=' checkbox ' type 'attr('选中')；var a2=$('#c2 ')。attr('选中')；var a3=$('#c3 ')。attr('选中')；var a4=$('#c4 ')。attr('选中')；var a5=$('#c5 ')。attr('选中')；var a6=$('#c6 ')。attr('选中')；var p1=$('#c1 ')。道具('选中')；var p2=$('#c2 ')。道具('选中')；var p3=$('#c3 ')。道具('选中')；var p4=$('#c4 ')。道具('选中')；var p5=$('#c5 ')。道具('选中')；var p6=$('#c6 ')。道具('选中')；console . log(' a 1: ' a1)；console . log(' a 2: ' a2)；console . log(' a 3: ' a3)；console . log(' a 4: ' a4)；console . log(' a 5: ' a5)；console . log(' a 6: ' a6)；console . log(' p 1: ' P1)；console . log(' p 2: ' p2)；console . log(' p 3: ' P3)；console . log(' p 4: ' P4)；console . log(' p 5: ' P5)；console . log(' p 6: ' P6)；结果是这样的(铬)

影响

发现attr的返回值要么勾选要么未定义，prop的返回值只有真假。

在网上搜索测试后，

prop()函数：的结果

1.如果有相应的属性，则返回指定的属性值。

2.如果没有对应的属性，返回值为空字符串。

attr()函数：的结果

1.如果有相应的属性，则返回指定的属性值。

2.如果没有对应的属性，返回值是未定义的。

对于HTML元素的固有属性，在处理时，使用prop方法。

对于我们自己定制的HTML元素的DOM属性，在处理的时候，使用attr方法。

具有真属性和假属性的属性，如选中、选中或禁用，请使用prop()

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。