JQuery changes the status of the checkbox, not valid

Today writes the page to encounter the check box dynamic full selection or all does not select the question, the normal wording is as follows:

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

but! First click the Select All button input to display the check, the second time is not, looked under the proposal with prop, pro-test effective. What's the difference between the two?

The difference between the jquery function attr () and prop (): 1. Different objects of operation

　　attr and prop are abbreviations for the word attribute and property respectively, and they all denote the meaning of "attributes".

However, in jquery,attribute and property are two different concepts. Attribute represents the properties of the HTML document node, and the property represents the properties of the JS object.

<!--here the ID, class, and data_id are all attribute--><div id= "message" class= "test" data_id= "123" of the element's document node ></div ><script type= "Text/javascript" >// The name, age, and URL are all obj'spropertyvar obj = {Name : "Codeplayer", age:18, url: "http://www.365mini.com/" }; </script>

In jquery, the prop() function is designed to set or get the property on the specified DOM element (referred to as the JS object, element type), and attr() the function is designed to set or get properties on the document node corresponding to the specified DOM element ( attribute).

In the underlying implementation of jquery, functions attr() and functions are prop() implemented through the JS native element object (as in the code above msg ). The attr() function mainly relies on the getAttribute() and two methods of the element object setAttribute() . The prop() function mainly relies on the object property acquisition and setting method of JS native.

<div id= "message" class= "test" data_id= "123" ></div><script type= "Text/javascript" >varmsg = document.getElementById ("message");var$msg =$ (msg);/** * * attr () depends on the element object's Element.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");varDataid = $msg. attr ("data_id");//145/** * * prop () depends on the JS native Element[property] and element[property] = value; * * **///equivalent to msg["pid"] = "pid value";$msg. Prop ("pid", "pid value"));//equivalent to msg["pid"];varTestprop = $msg. Prop ("pid");//PID Value</script>

Of course, jquery encapsulates these operations, making it easier for us to operate (for example, setting multiple properties in object form) and implementing cross-browser compatibility.

In addition, although the property of the prop() DOM element is targeted, it is not the attribute of the element node. However, changes to some properties of DOM elements also affect the corresponding attributes on the element nodes. For example, the property corresponds to the attribute ID of the property corresponding to the id className attribute class.

<div id= "message" class= "test" data_id= "123" ></div><script type= "Text/javascript" >var msg = document.getElementById ("message"); var $msg = $ (msg);d Ocument.writeln ($msg. attr (//  test$msg. Prop ("ClassName", " Newtest "); // modifying classname (property) causes class (attitude) to change as well // newtest</script>

2. Different application versions

　　attr()is the jquery 1.0 version of the function, prop() is the jquery 1.6 version of the new function. There is no doubt that before 1.6, you attr() can only use functions, 1.6 and later versions, you may choose the corresponding function according to the actual needs.

3. Different property value types for setting

Because the attr() function operates on the properties of the document node, the property value set can only be a string type, and if it is not a string type, its ToString () method is also called to convert it to a string type.

prop()The function operates on the properties of the JS object, so the property values set can be any type, including arrays and objects .

4. Other details

Prior to jquery 1.6, only attr() functions were available, and the function not only assumed the setup and acquisition of attribute, but also assumed the property's setup and acquisition work. For example: Before jquery 1.6, attr() You can also set or get the property of DOM elements such as tagname, ClassName, NodeName, NodeType, and so on.

Until the jquery 1.6 new prop() function is used to take care of the property's settings or get work, it attr() is only responsible for setting up attribute and getting work.

In addition, for attributes such as checked,selected,disabled , and so on for form elements, before jquery 1.6, the attr() return value of these properties is obtained as a Boolean type: If selected (or disabled) is returned true , otherwise returned false .

However, starting with 1.6, the attr() return value used to get these properties is of type string, and if selected (or disabled) returns checked,selected , or disabled, otherwise ( That is, the element node does not have this property) returned undefined . Also, in some versions, these property values represent the initial state values at the time the document was loaded, and the corresponding property values do not change even after the selected (or disabled) State of those elements is changed.

Because jquery thinks that: attribute's checked,selected, anddisabled are the values that indicate the initial state of the property, checked selected disabled A value that represents the real-time state of the property (value true or false ).

Therefore, in jquery 1.6 and later versions, use prop() functions to set or get, and checked so on, selected disabled properties. For other operations that can be prop() implemented, use the function as much as possible prop() .

<input id= "UID" type= "checkbox" checked= "Checked" value= "1" ><script type= "Text/javascript" >//the current jquery version is 1.11.1varUID = document.getElementById ("UID");var$uid =$ (UID);d Ocument.writeln ($uid. attr ("Checked"));//checkedDocument.writeln ($uid. Prop ("checked"));//true//Uncheck the check box UID (set it to false)//equivalent to uid.checked = false;$uid. Prop ("Checked",false);//attr () Gets the value of the initial state, even if unchecked, does not changeDocument.writeln ($uid. attr ("checked"));//checked//prop () the value obtained has changedDocument.writeln ($uid. Prop ("checked"));//false</script>

--Non-original

JQuery changes the status of the checkbox, not valid