jQuery 带有复选框的版本控制错误

Question

这段简单的代码在 jquery 1.8.3 中完美运行然而 > 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

而不是

$("#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
        }
    });
});

Answer 2

使用这个prop()

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

Answer 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").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 4

我做错了什么？

来自 .attr() 的文档：

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

Attributes vs. Properties
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

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

    $(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">

jQuery 带有复选框的版本控制错误

jQuery versioning bug with checkboxes

html

versioning

checkbox

jquery