Question

这段简单的代码在jquery 1.8.3中完美运行但是＆gt; jquery 1.8.3它停止工作。我做错了什么？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#button').click(function(){
        if($("#stc").is(':checked'))
        {
            $("#stc").attr('checked', false);
            //do some code
        }
        else
        {
            $("#stc").attr('checked', true);
            //do some other code
            //so no toggle() I believe
        }
    });
});
</script>
</head>
<body>
<button id="button">(de)select</button>
<input type="checkbox" id="stc">
</body>
</html>

尝试使用1.8.3：

Answer 1

使用此prop()

  if($("#stc").is(':checked')) {
            $(this).prop('checked', false);
            //do some code
        } else {
            $(this).prop('checked', true);           
        }

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#button').click(function(){
        if($("#stc").is(':checked'))
        {
            $("#stc").prop('checked', false);
            //do some code
        }
        else
        {
            $("#stc").prop('checked', true);
            //do some other code
            //so no toggle() I believe
        }
    });
});
</script>
</head>
<body>
<button id="button">(de)select</button>
<input type="checkbox" id="stc">
</body>
</html>

Answer 3

我做错了什么？

来自.attr()的文档：

要检索和更改DOM属性，例如表单元素的已选中，已选中或已禁用状态，使用.prop（）方法。

属性与属性
  在特定情况下，属性和属性之间的差异可能很重要。在jQuery 1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。从jQuery 1.6开始，.prop（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性。

例如，应检索selectedIndex，tagName，nodeName，nodeType，ownerDocument，defaultChecked和defaultSelected，并使用.prop（）方法进行设置。在jQuery 1.6之前，这些属性可以使用.attr（）方法检索，但这不在attr的范围内。它们没有相应的属性，只是属性。

我建议您使用.prop()，而不要求使用任何if/else条件。您只需选中复选框的checked属性：

    $(document).ready(function() {
      $('#button').click(function() {
        $("#stc").prop('checked', !$("#stc")[0].checked);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">(de)select</button>
<input type="checkbox" id="stc">

Answer 4

而不是

$("#stc").attr('checked', false);

使用.prop()

$("#stc").prop('checked', false);

完整代码： -

$(document).ready(function() {
    $('#button').click(function(){
        if($("#stc").is(':checked'))
        {
            $("#stc").prop('checked', false);//Or $("#stc").removeAttr('checked');
            //do some code
        }
        else
        {
            $("#stc").prop('checked', true);//Or $("#stc").attr('checked','checked');
            //do some other code
            //so no toggle() I believe
        }
    });
});

带有复选框的jQuery版本错误

4 个答案: