Solutions and Analysis of bugs selected by jquery checkbox

Solutions and Analysis of bugs selected by jquery checkbox

When I was working on a project, I encountered a BUG in selecting and canceling the jQuery checkbok check box. After consulting the experts, I found out what was going on. I will record it here and analyze it for you.

First run the Code:

 

The Code is as follows:

<Form>
What kind of sports do you like? <Input type = "checkbox" id = "CheckedAll"/> select all or not <br/>
<Input type = "checkbox" name = "items" value = ""/> football
<Input type = "checkbox" name = "items" value = "basketball"/> basketball
<Input type = "checkbox" name = "items" value = "badminton"/> Badminton
<Input type = "checkbox" name = "items" value = "Table Tennis"/> Table Tennis
<Br/>
<Input type = "button" id = "send" value = "Submit"/>
</Form>

 

 

The Code is as follows:

$ ("# CheckedAll"). click (function (){
If ($ (this). is (": checked ")){
$ ("[Name = items]: checkbox"). attr ("checked", true );
} Else {
$ ("[Name = items]: checkbox"). attr ("checked", false );
}
});

 

The first execution is OK, but the second execution is faulty.

Solution: replace attr () with prop ()

 

The Code is as follows:

$ ("# CheckedAll"). click (function (){
If ($ (this). is (": checked ")){
$ ("[Name = items]: checkbox"). prop ("checked", true );
} Else {
$ ("[Name = items]: checkbox"). prop ("checked", false );
}
});

 

PS: prop () and attr:

In the news about iteye recently, jQuery has been updated to 1.6.1. The. prop method is added to the biggest change from the previous version. However, the. prop () method and. attr () method are hard to distinguish from each other literally. In Chinese, both properties and attributes indicate "attributes.
Based on this blog post (javascript: mctmp (0);), we briefly translate the usage of. prop () and. attr:

1. upgrade from 1.5.2 to 1.6.1

By introducing the changes to the new method. prop () and. attr (), jQuery1.6.1 has aroused a heated discussion about the differences and relationships 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 describes the Attributes module changes in jQuery1.6 and 1.6.1, as well as the preferred use of the. attr () method and. prop () method. However, as mentioned earlier, jQuery1.6.1 allows you to use the. attr () method just as it was previously used in all cases.

2. What changes have taken place?

The Attributes module removed the ambiguity between attributes and properties, but caused some confusion in the jQuery community, because a method is used in all versions earlier than 1.6 (. attr () to process attributes and properties. However, the old. attr () method has some bugs and is difficult to maintain. JQuery1.6.1 updated the Attributes module and fixed several bugs.

In particular, boolean attributes, such as checked, selected, readonly, and disabled are processed the same way before 1.6.1 and 1.6. This means the following code:

 

The Code is as follows:

$ (": Checkbox"). attr ("checked", true );
$ ("Option"). attr ("selected", true );
$ ("Input"). attr ("readonly", true );
$ ("Input"). attr ("disabled", true );

 

Even such code:

 

The Code is as follows:

If ($ (": checkbox"). attr ("checked") {/* Do something */}

 

In 1.6.1, there is no need to make any changes to maintain the expected running results.

To enable. the changes in the attr () method are clearly understood. The following are some examples of usage. the attr () example works normally in earlier versions of jQuery, but it must be used now. prop () method instead:

First, the. attr () method in window or document cannot run normally in jQuery1.6, because attributes cannot exist in window and document. They contain properties (such as location or readyState) and must be operated using the. prop () method or simply using the javascript native method. In jQuery1.6.1, using. attr () in the window and document will be automatically converted to using. prop instead of throwing an error.

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

<Input type = "checkbox" checked = "checked">
 
Boolean attributes, such as checked, is set to the default value or initial value only. In a checkbox element, checked attributes is set when the page is loaded, regardless of whether or not the checkbox element is selected.

Properties is what the browser uses to record the current value. Normally, properties reflects the corresponding attributes (if any ). But this is not a case of boolean attriubutes. When a user clicks a checkbox element or selects an option for a select element, boolean properties remains up-to-date. However, the corresponding boolean attributes are different. As described above, they are only used by the browser to save the initial values.

 

The Code is as follows:

$ (": Checkbox"). get (0). checked = true;
// Is the same as $ (": checkbox: first"). prop ("checked", true );

 

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

The Code is as follows:

$ (": Checkbox"). attr ("checked", true );

 

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

However, when jQuery1.6 was released, the jQuery team understood that setting some values is not particularly useful when the browser only cares about page loading. Therefore, to maintain backward compatibility and the usefulness of the. attr () method, we can continue to use the. attr () method in jQuery1.6.1 to obtain and set these boolean attributes.

The most common attributes types are checked, selected, disabled, and readOnly. However, the complete list of Using. attr () supported by jQuery1.6.1 to dynamically obtain and set boolean attributes/properties is as follows:

Autofocus, autoplay, async, checked, controls, defer, disabled,
Hidden, loop, multiple, open, readonly, required, scoped, selected
 
(Note: most of them are newly added html5 attributes)

We recommend that you use it. the prop () method is used to set these boolean attributes/properties, even if these use cases are not converted to use. prop () method, but your code can still run normally in jQuery1.6.1.

Below are some attributes and properties lists. Normally, you should use the corresponding method (see the list below) to obtain and set them. The following is the first usage, but the. attr () method can run in all attributes cases.

Note: The properties of some DOM elements are also listed below, but only run in the new. prop () method.

* Example: window. location
** If you need ()

. Attr () and. prop () should not be used for value/set value. Use the. val () method instead (even if you use. attr ("value", "somevalue"), you can continue running, as you did before 1.6)

3. Overview of preferred usage

The. prop () method should be used to process boolean attributes/properties and properties that do not exist in html (such as window. location. All other attributes (the ones you see in html) can and should continue to use the. attr () method for operations.