具体场景:
使用jquery动态给checkbox选中或者取消选中时候;
$("#listPanel input[type='checkbox']").removeAttr("checked");
$("#listPanel input[type='checkbox']").attr("checked",true);
问题描述:
第一遍勾选和取消是有效的,但是第二遍以后就没反应了,查看了属性,发现checked属性一直存在,但是没显示勾。就考虑移除checked属性看看。但是check属性是存在的;
解决办法:
$("#listPanel input[type='checkbox']").removeAttr("checked");
$("#listPanel input[type='checkbox']").prop("checked",true);
那我们现在来看这个两者的区别在哪里:
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。
关于它们两个的区别,简单总结下:
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
咱们简单举例说明下就明白了
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" my-attr="myAttr" />是否可见
像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果,my-attr是我自己定义的;咱们使用attr();
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"