jQuery 使用attr,方式设置 checked 失效原因及解决方法

  使用jQuery 的attr() 方法设置选择框 checked 失效核心原因是因 propertyattribute 实时同步的原因 。

<!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

  attributeHTML元素标签上的属性称之为attribute。

  使用jQuery操作的元素属性时:布尔值属性:使用prop() ,非布尔值属性:使用attr() 。 

总结:

  attribute 与 property同步关系

    非布尔值属性:实时同步。

    布尔值属性:

      property 永远不会同步至attribute

      在没有改动过property的情况下 attribute 会同步至 property

      在改动过property的情况下 attribute 不会同步至 property