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

来源：互联网发布：java连接ldap实例编辑：程序博客网时间：2024/06/10 06:48

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

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

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

1.背景

2.现象

3.解决办法

4.说明

5.总结

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