jQuery 使用attr,方式设置 checked 失效原因及解决方法
使用jQuery 的attr() 方法设置选择框 checked 失效核心原因是因 property 和 attribute 实时同步的原因 。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://lib.baomitu.com/jquery/3.3.0/jquery.js"></script> </head> <body> <input type="checkbox" /> </body> <script> //方法一 $("#input").prop("checked",true); //方法二 var input = document.querySelector("#input"); input.checked=true; </script> </html>
首先写出其解决办法:
方法1:使用 $(选择器).prop(“checked ”,true),进行设置 。
方法2:使用JS 获得元素,设置checked属性 为 true(选中) 或 false (不选中)
property : 原生JS对对象的属性称之为 property。
attribute :HTML元素标签上的属性称之为attribute。
使用jQuery操作的元素属性时:布尔值属性:使用prop() ,非布尔值属性:使用attr() 。
总结:
attribute 与 property同步关系
非布尔值属性:实时同步。
布尔值属性:
property 永远不会同步至attribute
在没有改动过property的情况下 attribute 会同步至 property
在改动过property的情况下 attribute 不会同步至 property