JQuery changes the status of the checkbox. The solution is invalid. jquerycheckbox

JQuery changes the status of the checkbox. The solution is invalid. jquerycheckbox

When I write a page today, the check box is dynamically deselected or deselected. The normal syntax is as follows:

$("#tb").find("input[type='checkbox']").attr("checked","checked");

But! The input check box is displayed when you click the Select All button for the first time. It will not work for the second time. It is recommended that you use prop for further testing. What is the difference between the two?

Differences between jQuery functions attr () and prop:

1. Different operation objects

"Attr" and "prop" are abbreviations of the word "attribute" and "property", and both represent the meaning of "attribute.

However, in jQuery, "attribute" and "property" are two different concepts. Attribute indicates the attributes of HTML document nodes, and property indicates the attributes of JS objects.

<! -- The id, class, and data_id here are the attributes of this element's document node --> <div id = "message" class = "test" data_id = "123"> </div> <script type = "text/javascript"> // the name, age, and url here are the propertyvar obj = {name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };</script>

In jQuery, the design goal of the prop () function is to set or obtain attributes on the specified DOM Element (JS object, Element type); attr () the function is designed to set or obtain the attribute on the document node corresponding to the specified DOM element ).

In the underlying implementation of jQuery, the functions of the functions attr () and prop () are implemented through the native Element object of JS (such as the msg in the above Code. The attr () function mainly depends on the getAttribute () and setAttribute () Methods of the Element object. The prop () function depends mainly on the methods for obtaining and setting object attributes generated in JS.

<Div id = "message" class = "test" data_id = "123"> </div> <script type = "text/javascript"> var msg = document. getElementById ("message"); var $ msg = $ (msg);/*** attr () depends on the Element of the element object. getAttribute (attribute) and element. setAttribute (attribute, value) ***** // equivalent to msg. setAttribute ("data_id", 145); $ msg. attr ("data_id", 145); // equivalent to msg. getAttribute ("data_id"); var dataId = $ msg. attr ("data_id"); // 145/***** prop () depends on JS native element [property] and element [property] = value; * *** // equivalent to msg ["pid"] = "pid value"; $ msg. prop ("pid", "pid value"); // equivalent to msg ["pid"]; var testProp = $ msg. prop ("pid"); // pid value </script>

Of course, jQuery encapsulates these operations to make it easier (for example, setting multiple attributes in the form of objects at the same time) and achieve cross-browser compatibility.

In addition, althoughprop()The attribute of the DOM element is used instead of the attribute of the element node. However, changes to some attributes of the DOM element also affect the corresponding attributes on the element node. For exampleidCorresponding to attributeId, PropertyclassNameCorresponding to attributeClass.

<Div id = "message" class = "test" data_id = "123"> </div> <script type = "text/javascript"> var msg = document. getElementById ("message"); var $ msg = $ (msg); document. writeln ($ msg. attr ("class"); // test $ msg. prop ("className", "newTest"); // modifying className (property) causes class (attitude) to change document. writeln ($ msg. attr ("class"); // newTest </script>

2. Different Application versions

Attr () is a function available in jQuery 1.0, and prop () is a new function added in jQuery 1.6. There is no doubt that before 1.6, you can only use the attr () function; 1.6 and later versions, you can select the corresponding function as needed.

3. the attribute values used for setting are of different types.

Because the attr () function operates on the attributes of the document node, the attribute value can only be a string type. If it is not a string type, the toString () method is also called, convert it to the string type.

The prop () function operates on the attributes of JS objects. Therefore, the set attribute values can be of any type including arrays and objects.

4. Other Details

Before jQuery 1.6, only the attr () function is available. This function not only sets and obtains attributes, but also sets and obtains properties. For example, before jQuery 1.6, attr () can also set or obtain the property of DOM elements such as tagName, className, nodeName, and nodeType.

Until the prop () function is added to jQuery 1.6 and used for setting or obtaining the property, attr () is only used for setting and obtaining the attribute.

In addition, for attributes such as "checked", "selected", and "disabled" of form elements, before jQuery 1.6, attr () obtains the return values of these attributes as Boolean: if it is selected (or disabled), true is returned; otherwise, false is returned.

However, starting from 1.6, the return values of these attributes obtained using attr () are of the String type. If selected (or disabled), "checked", "selected", or "disabled" is returned ", otherwise (the element node does not have this attribute), undefined is returned. In some versions, these attribute values indicate the Initial State values when the document is loaded. Even if these elements are selected (or disabled), the corresponding attribute values will not change.

Because jQuery considers that attribute's "checked", "selected", and "disabled" are values that indicate the initial status of the attribute, property checked, selected, or disabled indicates the value of the real-time state of the property (the value is true or false ).

Therefore, in jQuery 1.6 and later versions, use the prop () function to set or obtain attributes such as checked, selected, and disabled. Use the prop () function whenever possible for other operations that can be implemented using prop.

<Input id = "uid" type = "checkbox" checked = "checked" value = "1"> <script type = "text/javascript"> // The current jQuery version is 1.11.1var uid = document. getElementById ("uid"); var $ uid = $ (uid); document. writeln ($ uid. attr ("checked"); // checkeddocument. writeln ($ uid. prop ("checked"); // true // deselect the check box uid (set it to false) // equivalent to uid. checked = false; $ uid. prop ("checked", false); // attr () obtains the initial state value, and does not change the document even if it is deselected. writeln ($ uid. attr ("checked"); // checked // the value obtained by prop () has changed. document. writeln ($ uid. prop ("checked"); // false </script>

The above jQuery changes the status of the checkbox. The invalid solution is to share all the content with you in the editor. I hope you can give us a reference and support for the help house.