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

最新推荐文章于 2023-03-15 09:39:06 发布

转载最新推荐文章于 2023-03-15 09:39:06 发布 · 509 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wang-yi/p/9805539.html

文章标签：

#javascript #ViewUI

本文探讨了使用jQuery的attr()方法设置选择框checked状态失效的原因，并提供了两种有效解决方案：一是使用prop()方法，二是直接通过原生JS修改checked属性。深入解析了property与attribute的区别及同步机制。

　　使用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" id="input"/>
    </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