JQuery change the state of the checkbox, invalid workaround _jquery

Today write the page encountered check box dynamic selection or full choice, the normal writing is as follows:

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

but! The first click of the Full selection button input display on the hook, the second is not, check the following recommendations with prop, the pro-test effective. What's the difference between the two?

The difference between the jquery function attr () and prop ():

1. Different Operation objects

The words "attr" and "prop" are abbreviations for the word "attribute" and "property", and they all represent the meaning of "attributes".

However, in jquery, "attribute" and "property" are two different concepts. attribute represents the attributes of an HTML document node that represents the properties of a JS object.

<!--here ID, class, data_id are the attributes of the element's document node-->
<div id= "message" class= "test" data_id= "123" ></ div>

<script type= "Text/javascript" >
//The name, age, URL of obj is the property
var obj = {Name: " Codeplayer ", age:18, url:" http://www.365mini.com/"};
</script>

In jquery, the prop () function is designed to set or get properties on a specified DOM element (referring to a JS object, element type); attr () A function is designed to set or get attributes on a document node that corresponds to a specified DOM element.

In the underlying implementation of jquery, Functions attr () and prop () are implemented through JS native element objects such as MSG in the above code. The attr () function relies primarily on the getattribute () and setattribute () two methods of the element object. The prop () function is mainly dependent on the acquisition and setting of the object attributes of JS native.

<div id= "message" class= "test" data_id= "123" ></div>
<script type= "Text/javascript" >
var msg = document.getElementById ("message");
var $msg = $ (msg);

* * * * * attr () is dependent on the element object Element.getattribute and Element.setattribute (attribute, value) * * * * * * * *


Msg.setattribute ("data_id", 145);
$msg. attr ("data_id", 145);

Equivalent to Msg.getattribute ("data_id");
var dataid = $msg. attr ("data_id"); 145

/* * * * * * * * * * PROP () is dependent 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 modes of operation, making it easier for us to manipulate, such as setting multiple properties in an object form, and enabling Cross-browser compatibility.

In addition, it prop() is for the property of the DOM element, not the attribute of the element node. However, changes to some properties of the DOM element also affect the corresponding properties on the element node. For example, the ID of the property's corresponding attribute, class of the property id 's className corresponding attribute.

<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, the application version is different

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

3, used to set the property value type is different

Because the attr () function operates on a document node's properties, the Set property value can only be a string type, and if it is not a string type, its ToString () method is called and converted to a string type.

The prop () 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 the attr () function was available, and the function not only assumed the setup and acquisition of attributes, but also assumed the setting and acquisition of the property. For example, before jquery 1.6, attr () can also set or get the property of DOM elements such as tagname, ClassName, NodeName, NodeType, and so on.

Until jquery 1.6 adds the prop () function and uses it to set up or acquire the work, attr () is only used to set and get the attribute.

Also, for attributes such as "Checked", "selected", "disabled", and so on for form elements, before jquery 1.6, attr () Gets the return value of these properties to be Boolean: Returns True if it is selected (or disabled). otherwise returns false.

However, from 1.6, use attr () to get the return value of these properties to string type, and if checked (or disabled) returns "Checked", "selected" or "disabled", otherwise (that is, the element node does not have this property) returns undefined. Also, in some versions, these property values represent the initial state values when the document is loaded, and the corresponding property values do not change even after the selected (or disabled) State of those elements is changed.

Because jquery thinks: attribute of "Checked", "selected", "Disabled" is the value of the initial state of the attribute, the property of checked, selected, Disabled indicates the value of the property's real time state (a value of true or false).

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

<input id= "UID" type= "checkbox" checked= "Checked" value= "1" >

<script type= "Text/javascript" >
// Current jquery version is 1.11.1
var uid = document.getElementById ("UID");
var $uid = $ (UID);

Document.writeln ($uid. attr ("checked")); Checked
Document.writeln ($uid. Prop ("checked"));//True

//Uncheck Box UID Check (set to False)
//equivalent to uid.checked = false;
$uid. Prop ("checked", false);

attr () Gets the value of the initial state, and does not change the
Document.writeln ($uid. attr ("checked"), even if the check is canceled);//checked
//prop () the value obtained has changed
Document.writeln ($uid. Prop ("checked"));//False
</script>

The above jquery change checkbox state, Invalid solution is small series to share all the content, hope to give you a reference, also hope that we support cloud habitat community.