jquery checkbox checked bug problem solution and analysis_jquery

PS: The difference between prop() and attr():

I recently saw in iteye’s news that jQuery has been updated to 1.6.1. The biggest change from the previous version is the addition of the .prop method. However, it is difficult to distinguish between the .prop() method and the .attr() method literally. In Chinese, properties and attributes both mean "attributes".
The following is a brief translation of the usage of .prop() and .attr() based on this blog post (javascript:mctmp(0);):

1. Upgrade from 1.5.2 to 1.6.1

By introducing the new method .prop() and the changes to the .attr() method, jQuery 1.6.1 triggered a heated discussion about the differences and connections between attributes and properties. At the same time, 1.6.1 also solves some backward compatibility issues. When upgrading from 1.5.2 to 1.6.1, you do not have to modify any attribute code.

The following is a description of the changes to the Attributes module in jQuery 1.6 and 1.6.1, as well as the preferred use of the .attr() method and the .prop() method. However, as mentioned earlier, jQuery 1.6.1 allows you to use the .attr() method as it was used in all cases before.

2. What changes have occurred

The change to the Attributes module was to remove the ambiguity between attributes and properties, but caused some confusion in the jQuery community because in all versions before 1.6 it was handled using a single method (.attr()) attributes and properties. But the old .attr() method has some bugs and is difficult to maintain. jQuery1.6.1 updates the Attributes module and fixes several bugs.

Special mention is that boolean attributes, such as: checked, selected, readonly and disabled, are treated the same in 1.6.1 as before 1.6. This means the following code:

Even code like this:

No changes are necessary in 1.6.1 to maintain the previously expected performance.

In order to make the changes in the .attr() method in jQuery 1.6 clearer, here are some examples of using .attr(). Although it can work normally in previous versions of jQuery, it must be used now. prop() method instead:

First of all, using the .attr() method in window or document does not work properly in jQuery 1.6 because there cannot be attributes in window and document. They contain properties (such as location or readyState) and must be manipulated using the .prop() method or simply using native JavaScript methods. In jQuery 1.6.1, using .attr() in window and document will be automatically converted to using .prop instead of throwing an error.

Secondly, checked, selected, and other boolean attributes mentioned earlier are treated specially because of the special relationship between these attributes and their corresponding properties. Basically, an attribute is what you see in the following html:

boolean attributes, such as checked, are only set to default or initial values. In a checkbox element, checked attributes are set when the page loads, regardless of whether the checkbox element is selected.

Properties are what the browser uses to record the current value. Normally, properties reflect their corresponding attributes (if present). But this is not the case with boolean attriubutes. Boolean properties are kept up to date when the user clicks a checkbox element or selects an option in a select element. But the corresponding boolean attributes are different. As mentioned above, they are only used by the browser to save the initial value.

In jQuery1.6, if you use the following method to set checked:

The checkbox element will not be checked because it is a property that needs to be set, but all your settings will be initial values.

However, once jQuery 1.6 was released, the jQuery team understood that setting some values ​​was not particularly useful when the browser only cared about page loading. Therefore, in order to maintain backward compatibility and the usefulness of the .attr() method, we can continue to use the .attr() method to get and set these boolean attributes in jQuery 1.6.1.

The most common attributes are checked, selected, disabled and readOnly, but the following is the complete list of jQuery 1.6.1 supports using .attr() to dynamically get and set boolean attributes/properties:

autofocus, autoplay, async, checked, controls, defer, disabled,
hidden, loop, multiple, open, readonly, required, scoped, selected

(Translator's note: Most of them are new attributes added to html5)

It is still recommended to use the .prop() method to set these boolean attributes/properties. Even if these use cases are not converted to use the .prop() method, your code can still run normally in jQuery 1.6.1.

The following is a list of some attributes and properties. Under normal circumstances, you should use their corresponding methods (see the list below) to get and set them. The following is the first usage, but the .attr() method will work with all attributes.

Note: Some DOM element properties are also listed below, but only run in the new .prop() method

*For example: window.location
**If needed over (if needed over) .width()

Neither .attr() nor .prop() should be used to get/set values. Use the .val() method instead (even using .attr("value","somevalue") will continue to work, just like it did before 1.6)

3. Overview of preferred usage

.prop() method should be used to handle boolean attributes/properties and properties that do not exist in html (eg: window.location). All other attributes (the ones you see in HTML) can and should continue to be manipulated using the .attr() method.

The above summary has been described clearly enough, and there is no need for me to summarize it further.