Question about the checked attribute of the input obtained by The jquery attr method

Problem: Often use the jquery plug-in attr method to get the Checked property value, the size of the obtained value is undefined, the prop method can be used to obtain its true value, the following describes the difference between the two methods:

1. Get the Checked property by prop method, get checked return value Boolean, select True, or Flase

<input type= "checkbox" id= "SelectAll" onclick= "Checkall ()" > select all
function Checkall ()
{
var checkedofall=$ ("#selectAll"). Prop ("checked");
alert (checkedofall);
$ ("Input[name= ' Procheck ']"). Prop ("Checked", checkedofall);
}

2. If you use the Attr method to obtain, if the checked property is not defined in the current input, whether or not it is currently selected,

$ ("#selectAll"). attr ("checked") will return undefined <input type= "checkbox" id= "SelectAll" onclick= "Checkall"

() " > select
If the defined checked property is initialized in the current input, $ ("#selectAll"), regardless of whether it is selected. attr ("checked") will return checked.
<input type= "checkbox" id= "SelectAll" onclick= "Checkall ()" Checked> Select all
function Checkall ()
{
var checkedofall=$ ("#selectAll"). attr ("checked");
alert (checkedofall);
$ ("Input[name= ' Procheck ']"). attr ("Checked", checkedofall);
}

So, start debugging the code, in the 1.9.0 version:

<input type= "checkbox"/>

<script>

$ (function () {

$ (' input '). Click (function () {

$ ( This). attr (' checked ');

});

</script>

Click CheckBox, the result is undefined

In the 1.8.3 version, the result is checked and undefined.

Here, the answer to the question, which is the question of using the attr () method, is to check the official document to see that a new method prop () has been added from JQuery 1.6, but has never been used.

From the Chinese point of view, the two are to get/set attributes and properties of the method, then why add prop () method?

Because before JQuery 1.6, the use of attr () sometimes occurs inconsistent behavior.

So, when to use attr (), when to use Prop ()?

According to the official recommendation: Properties with True and false two attributes, such as checked, selected, or disabled using prop (), and others using attr ()

In this way, the attr (' checked ') can be changed to prop (' checked ') to fix the issues.

And so on, seemingly the problem has not really been solved, why the first example of JQuery 1.8.3 and 1.9.0 using attr () will be different?

To know their differences, the best way is to look at their source code:

1.8.3 attr ():

Attr: function ( elem, name, value, pass )  {var ret, hooks, 

Notxml, ntype = elem.nodetype;

 don ' T get/set attributes on text, comment and attribute nodes if  ( !elem | |  ntype === 3 | |  ntype === 8 | |

 nType === 2 )  {return; } if  ( pass && jquery.isfunction ( jQuery.fn[ name ] )  )

 {return jquery ( elem ) [ name ] ( value ); }// fallback to prop when attributes are not supported if  (  typeof elem.getattribute ===  "undefined"  )  {Return jquery.prop ( elem, 

name, value ); } notxml = ntype !== 1 | |

 !jquery.isxmldoc ( elem );  all attributes are loweRcase// grab necessary hook if one is defined if  ( notxml )

 {name = name.tolowercase (); hooks = jquery.attrhooks[ name ] | |

  ( rboolean.test ( name )  ? boolHook : nodeHook ); } if  ( value !== undefined )  {if  ( value === null )

 {jquery.removeattr ( elem, name );

Return } else if  ( hooks &&  "Set"  in hooks &&  notxml &&  (Ret = hooks.set ( elem, value, name ))  !==

 undefined )  {return ret;

} else {Elem.setattribute ( name, value +  ""  );

return value; }} else if  ( hooks &&  "Get"  in hooks &&  notxml &&  (ret  = hooks.get ( elem, name ))  !== null )  {return ret;

} else {Ret = elem.getattribute ( name );

 non-existent attributes return null, we normalize to undefined

return ret === null ?

undefined : ret; }

}

1.9.0 attr ():

Attr: function ( elem, name, value )  {Var ret, hooks, notxml, Ntype

 = elem.nodeType;

 don ' T get/set attributes on text, comment and attribute nodes if  ( !elem | |  ntype === 3 | |  ntype === 8 | |

 nType === 2 )  {return; }// fallback to prop when attributes are not supported if  (  typeof elem.getattribute ===  "undefined"  )  {Return jquery.prop ( elem, 

name, value ); } notxml = ntype !== 1 | |

 !jquery.isxmldoc ( elem );  all attributes are lowercase// grab necessary hook if one

 is defined if  ( notxml )  {name = name.tolowercase (); hooks = jquery.attrhooks[ name ]  | |

  ( rboolean.test ( name )  ? boolHook : nodeHook ); } if  ( value !== undefined )  {if  ( value === null )

 {jquery.removeattr ( elem, name ); } else if  ( hooks && notxml &&  "Set"  in  hooks &&  (Ret = hooks.set ( elem, value, name ))  !== 

undefined )  {return ret;

} else {Elem.setattribute ( name, value +  ""  );

return value; }} else if  ( hooks && notxml &&  "Get"  in  hooks &&  (Ret = hooks.get ( elem, name ))  !== null )

 {return ret; } else {// in ie9+, flash objects don ' t have .getattribute  ( #12945)// support: ie9+ if  ( typeof elem.getAttribute !==  "undefined"  )

 {Ret = elem.getattribute ( name );

}// non-existent attributes return null, we normalize to undefined

return ret == null ?

undefined : ret; }

}

1.8.3 and 1.9.0 's prop () are the same:

Prop: function ( elem, name, value )  {Var ret, hooks, notxml, Ntype

 = elem.nodeType;

 don ' T get/set properties on text, comment and attribute nodes if  ( !elem | |  ntype === 3 | |  ntype === 8 | |

 nType === 2 )  {return; } notxml = ntype !== 1 | |

 !jquery.isxmldoc ( elem ); if  ( notxml )  {// fix name and attach hooks name =  jquery.propfix[ name ] | |

 name;

hooks = jquery.prophooks[ name ]; } if  ( value !== undefined )  {if  ( hooks &&  "set")  in hooks &&  (Ret = hooks.set ( elem, value, name ))

 !== undefined )  {return ret; } else {return  ( elem[ name ] = value ); }} else {if  ( hooks &&  "Get"  in hooks &&  (

Ret = hooks.get ( elem, name ))  !== null )  {return ret;

} else {return elem[ name ]; }

}

}

First, let's look at the difference between attr () and prop ():

attr () inside, the two most critical lines of code

Elem.setattribute (name, Value + "");

ret = Elem.getattribute (name);

It is obvious that using the DOM API setattribute () and the GetAttribute () method manipulate the property element node.

Prop () inside, the two most critical lines of code

Return (elem[name] = value);

return elem[name];

This can be understood as document.getElementById (EL) [Name] = value, which is an attribute that is converted to an element.

Comparing the attr () method of debugging 1.9.0 and 1.8.3, we find that the difference between the two is

Hooks.get (Elem, name))

The value returned is not the same as the specific implementation:

In 1.8.3

Boolhook = {

get:function (elem, name) {

//Align Boolean attributes with corresponding properties

//Fall b Ack to attribute presence where some booleans are not supported

var Attrnode, Property

= Jquery.prop (elem, name) ;

return property = = = True | | typeof Property!== "Boolean" && (Attrnode = Elem.getattributenode (name)) && Attrnode.nodevalue!== Fals E?

Name.tolowercase ():

undefined;

}

}

In 1.9.0

boolhook = {get: function ( elem, name )  {var// use .prop to  determine if this attribute is understood as boolean prop =  Jquery.prop ( elem, name ),// fetch it accordingly attr = typeof  prop ===  "boolean"  && elem.getattribute ( name ), detail = 

typeof prop ===  "Boolean"  ?

getsetinput && getsetattribute ? attr != null :// oldie fabricates an empty string for  Missing boolean attributes// and conflates checked/selected into 

Attroperties rusedefault.test ( name )  ? Elem[ jquery.camelcase (  "default-"  + name )  ] :!! attr :// fetch an attribute node for properties not&nbsP;recognized as boolean Elem.getattributenode ( name );

return detail && detail.value !== false ?

Name.tolowercase ()  : undefined; }

}

This shows that 1.9.0 does not recommend using attr () to manipulate properties with true and false two properties.

So our conclusion is:

Properties with True and false two properties, such as checked, selected, or disabled using prop (), and others using attr ().