猿问

请问大神,我这个全选/全不选 jq代码哪里出了问题?

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title></title>

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<form id="form2">

            <p>喜欢的运动</p>

            <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="checkbox" id="allorno" value="全选/全不选" />全选/全不选

            <input type="button" value="反选" />

            <input type="submit" value="提交" />

</form>

<script type="text/javascript">

$(function(){

        $("#allorno").click(function(){

                    $("#form2 :checkbox[name=items]").attr("checked",$(this).attr("checked"))

        });

})

</script>

</body>

</html>

————————————————————————

只有第一次点击全选的时候,有效果,再次点击想要全不选的时候,就不起作用了。

但是把$(this).attr("checked")换成原生写法this.checked就好使了,这是怎么回事呢?

佟舟
浏览 1114回答 1
1回答

jacsong

jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。 例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()方法取得,但是这并不是元素的attr属性。他们没有相应的属性(attributes),只有特性(property)。 例如,考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ,并假设它是一个JavaScript变量命名的elem : elem.checked true (Boolean) 将改变复选框的状态 $(elem).prop("checked") true (Boolean) 将改变复选框的状态 elem.getAttribute("checked") "checked" (String) 不会改变的复选框的初始状态; $(elem).attr("checked") (1.6) "checked" (String) 不会改变的复选框的初始状态; $(elem).attr("checked") (1.6.1+) "checked" (String) 将改变复选框的状态 $(elem).attr("checked") (pre-1.6) true (Boolean) 将改变复选框的状态 根据W3C的表单规范 ,在checked属性是一个布尔属性,这意味着只要该 attribute 存在,即使它没有值,或是一个空字符串,该属性对应的 property 就是 true。更改后的代码如下:<script type="text/javascript">        $(function () {            $("#allorno").click(function () {                $("input[name='items']").prop("checked", $(this).prop("checked"));            });        });    </script>
随时随地看视频慕课网APP

相关分类

JQuery
我要回答