为什么.attr(“checked”,true)在Jquery 1.7及更高版本中不起作用

时间:2012-11-13 14:37:14

标签: jquery

此代码适用于jQuery,ver。 1.6

<input type="checkbox" class="radio" value="1" name="sameName" />
<input type="checkbox" class="radio" value="1" name="sameName" />
<input type="checkbox" class="radio" value="1" name="sameName" />

$("input:checkbox").click(function() {
    if ($(this).attr("checked") === true) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).attr("checked", false);
        $(this).attr("checked", true);
    } else {
        $(this).attr("checked", false);
    }
});​

但是如果我使用jQuery 1.7的新方法更改代码它不会工作?为什么?谢谢你的时间:

$("input:checkbox").on('click', function() {
    if ($(this).attr("checked") === true) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).attr("checked", false);
        $(this).attr("checked", true);
    } else {
        $(this).attr("checked", false);
    }
});​

3 个答案:

答案 0 :(得分:7)

使用.prop('checked',true)代替.attr

http://api.jquery.com/prop

此外,if ($(this).attr("checked") === true)可以简化为

if ($(this).prop("checked")) {

答案 1 :(得分:3)

attr返回一个字符串。您应该使用.prop为jQuery 1.6 +

设置checked属性
$("input:checkbox").on('click', function() {
    if (this.checked) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});​

来自jQuery .prop()docs

  

应该使用.prop()方法来设置disabled和checked而不是.attr()方法。

答案 2 :(得分:1)

因为你的代码错了。 .on()事件需要元素的容器。

因此,您的 HTML 代码应如下所示:

<div id="chkContainer">
    <input type="checkbox" class="radio" value="1" name="sameName" />
    <input type="checkbox" class="radio" value="1" name="sameName" />
    <input type="checkbox" class="radio" value="1" name="sameName" />
</div>

JAVASCRIPT 的功能如下:

$('#chkContainer').on('click', 'input:checkbox', function() {
    if ( $(this).is(':checked') ) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).attr("checked", false);
        $(this).attr("checked", true);
    } else {
        $(this).attr("checked", false);
    }
});

这是一个例子:http://jsfiddle.net/5xDzv/1/