checkbox勾选取消勾选只能操作一次的诡异问题

最新推荐文章于 2023-11-14 10:57:29 发布

小小笨小小熊

最新推荐文章于 2023-11-14 10:57:29 发布

阅读量1.3k

点赞数

分类专栏： jquery-checkbox 全选文章标签： jquery checkbox 全选

jquery-checkbox 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

全选

1 篇文章 0 订阅

订阅专栏

jquery checkbox勾选/取消勾选只能操作一次的诡异问题

1.背景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div>
            <form>
                你爱好的运动是？
                <br />
                <input type="checkbox" id="CheckedAll" />全选/全不选<br />
                <input type="checkbox" name="items" value="足球" />足球
                <input type="checkbox" name="items" value="篮球" />篮球
                <input type="checkbox" name="items" value="羽毛球" />羽毛球
                <input type="checkbox" name="items" value="乒乓球" />乒乓球
                <br/>
                <input type="button" id="send" value="提 交" />
            </form> 
        </div>
    </body>
<script type="text/javascript">
$("#CheckedAll").click(function () {
    if ($(this).is(":checked")) {
        $("[name=items]:checkbox").attr("checked", true);
    } else {
        $("[name=items]:checkbox").attr("checked", false);
    }
});
</script>
</html>

2.现象

第一次执行，没问题，但第二次执行就有问题了，选择不了

3.解决办法

把attr()换成prop()

4.说明

jquery中attr方法和prop方法的区别

.prop()方法和.attr()方法，单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。

jQuery中，用于获取属性的方法，主要是基于prop方法的，我们经常使用的是attr方法，不过在attr方法中，有时候会出现一些问题的，这里就看下jquery的API中attr的介绍
attr

attr()的作用:获取匹配到的第一个元素的一个属性值，或者是为所有匹配的元素进行属性赋值。

在jQuery 1.6中，.attr()方法查询那些没有设置的属性，则会返回一个undefined。如果你要去恢复或者改变DOM状态值，类似checked，selected，disabled等表单元素的状态，最好使用.prop()方法。
prop

使用prop方法获取属性则统一返回true和false。
属性值 VS 状态值

在一些特殊的情况下，属性值和状态值的不同是有很大影响的。在jQuery 1.6之前的版本，.attr()方法在恢复一些属性时，有时会把状态值也考虑进去，这样的话，就会导致浏览器的兼容问题。在jQuery 1.6中，.prop()提供的方法可以避免恢复状态值，而.attr()方法会恢复状态值。

例如：selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked,和defaultSelected这些属性，就应该使用.prop()方法进行恢复属性值。在jQuery 1.6之前的版本，这些状态值都是可以通过.attr()获取的，虽然获取这些状态值并不是attr的工作范围。这些个状态值和属性是没有任何联系的，它们仅仅是一个状态。
参考文档：http://www.zhangyunling.com/38.html

5.总结

首选用法的概述

.prop()方法应该被用来处理boolean attributes/properties(比如：checked,selected,readonly和disabled)以及在html(比如：window.location)中不存在的properties。

其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

小小笨小小熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
checkbox勾选取消勾选只能操作一次的诡异问题

jquery checkbox勾选/取消勾选只能操作一次的诡异问题1.背景<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.min.js" type="text/javascript"></script>
复制链接

扫一扫