JQuery changes the checkbox status. invalid, jquerycheckbox

JQuery changes the checkbox status. 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

　　AttrAndPropSeparate wordsAttributeAndPropertyAnd they all represent the meaning of "attribute.

However, in jQuery,AttributeAndPropertyBut there 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,prop()The function is designed 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 functionattr()Andprop()All functions are implemented through the native Element object of JS (such asmsg.attr()The function mainly depends on the Element ObjectgetAttribute()AndsetAttribute()Two methods.prop()The function mainly depends 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,prop()Is a new function in jQuery 1.6. There is no doubt that before 1.6, you can only useattr()Functions; 1.6 and later versions, you can select the corresponding function as needed.

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

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

prop()The 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, onlyattr()The function is available. This function not only sets and obtains attributes, but also sets and obtains properties. For example, before jQuery 1.6,attr()You can also set or obtain the property of DOM elements such as tagName, className, nodeName, and nodeType.

Until jQuery 1.6 is addedprop()Function, which is used to configure or obtain the property,attr()Is used only for setting and obtaining attribute.

In additionChecked,Selected,DisabledBefore jQuery 1.6,attr()Return values of these properties are Boolean: If selected (or disabled ),trueOtherwise, returnfalse.

However, starting from 1.6attr()Returns the String type of the returned values for these attributes. If the returned values are selected (or disabled ),Checked,SelectedOrDisabledOtherwise (the element node does not have this attribute), returnundefined. 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 believes that: attributeChecked,Selected,DisabledIndicates the initial state value of the property.checked,selected,disabledIndicates the value of the real-time status of the property (value:trueOrfalse).

Therefore, in jQuery 1.6 and later versions, useprop()Function to set or obtainchecked,selected,disabled. For other functionsprop()To achieve the operation, also try to useprop()Function.

<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>

-- Non-original