Solution and analysis of bug problem checked by jquery checkbox

When doing the project encountered a jquery checkbok check box checked to remove the bug, consulted the great God, just to make sense of what is going on, here recorded, analysis to everyone.

First code:

The

code is as follows:


<form>


is the sport you love? <input type= "checkbox" id= "Checkedall"/> Select all/Do not select <br/>


<input type= "checkbox" name= "Items" value= "Football"/> 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, no problem, but the second execution has a problem, can not choose

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 () difference:

Recently in Iteye's news, jquery has been updated to 1.6.1. And the biggest change in previous versions was increased. Prop method. But. The prop () method and the. attr () method are literally hard to distinguish. In Chinese, properties and attributes all have the meaning of "attribute".
The following is based on this post (javascript:mctmp (0);), briefly translating. Prop () and. attr ():

1. Upgrade from 1.5.2 to 1.6.1

By introducing the new method, prop () and the change of the. attr () method, jQuery1.6.1 caused a heated discussion about the difference and connection between attributes and properties. At the same time, 1.6.1 also solves some backward compatibility issues. When you upgrade from 1.5.2 to 1.6.1, you do not have to modify any attribute code.

The following is a description of the attributes module changes in jQuery1.6 and 1.6.1, as well as the preferred use of the. attr () method and the. Prop () method. However, as mentioned earlier, jQuery1.6.1 allows you to use the. attr () method just as it used to be in all cases.

2, what has changed

The change in the attributes module was to remove ambiguity between attributes and properties, but it caused some confusion in the jquery community because a method (. attr ()) was used in all versions prior to 1.6. To handle attributes and properties. But the old. attr () method has some bugs that are difficult to maintain. jQuery1.6.1 has updated the Attributes module and fixed several bugs.

Specifically, Boolean attributes, such as: Checked,selected,readonly and disabled, are treated the same as 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);

And even this code:

The

code is as follows:


if ($ (": CheckBox"). attr ("checked")) {/* do something/}

There is no need to change anything in the 1.6.1 in order to maintain the desired running results.

In order to make the changes in the. attr () method of jQuery1.6 understood clearly, here are some examples of using. attr (), although it works in previous versions of jquery, you must now use the. Prop () method instead:

First, the. attr () method used in window or document does not work properly in jQuery1.6 because attributes is not available in window and document. They contain properties (such as: Location or readystate) and must be manipulated using the. Prop () method or simply use JavaScript native methods. In jQuery1.6.1, Windows and document use. attr () will be automatically converted to use. Prop instead of throwing an error.

Second, checked,selected and the other Boolean attributes mentioned above 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:

<input type= "checkbox" checked= "Checked" >

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

Properties are the things that browsers use to record current values. Normally, properties reflect their corresponding attributes (if any). But this is not a case of Boolean attriubutes. The Boolean properties are kept up to date when the user clicks on a checkbox element or selects an option for a SELECT element. However, the corresponding Boolean attributes are not the same, as described above, they are used only by browsers to hold 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 that needs to be set, but all of your settings are initial values.

However, once jQuery1.6 was released, the jquery team understood that setting some values is not particularly useful when the browser is only concerned with page loading. Therefore, in order to maintain the usefulness of backward compatibility and 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 are checked,selected,disabled and ReadOnly, but the following is the use of jQuery1.6.1 support. attr () dynamically obtains and sets a Boolean attributes/ Complete list of properties:

Autofocus, AutoPlay, async, checked, controls, defer, disabled,
Hidden, loop, multiple, open, ReadOnly, required, scoped, selected

(Translator Note: Most of the new attributes are HTML5)

It is also recommended that you use the. Prop () method to set these Boolean attributes/properties, even if these use cases are not converted to use the. Prop () method, but your code can still function correctly in jQuery1.6.1.

Here is a list of some attributes and properties, and you should normally use their corresponding methods (see the list below) to get and set them. The following is the first usage, but the. attr () method can be run in all attributes cases.

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

* For example: window.location
* * If required in (if needed over). Width ()

attr () and. Prop () should not be used to value/set values. Use the. Val () method instead (even if you use. attr ("value", "somevalue") to continue to run, as it did before 1.6.

3. Overview of Preferred usage

The

. Prop () method should be used to handle Boolean attributes/properties and properties that do not exist in HTML (such as: window.location). All other attributes (what you see in HTML) can and should continue to use the. attr () method for operation.