Home > Developer > Web Develop
when using jquery for full selection and inverse selection, when using attr (), the first run of the browser can be selected all the time, but the second time is all selected, regardless of the use.
By finding the data, the prop () method is used instead of the attr () method.
Attention:
After Jquery 1.6, you can get properties by attr method, and prop method to get attributes.
Use the Prop method when encountering properties that you want to get or set checked,selected,readonly and disabled.
jquery1.6 added a new method prop (), the official explanation is only one sentence: Gets the property value of the first element in the matching element set.
We all know that some browsers just write disabled,checked can be, and some to write disabled = "disabled", checked= "checked", such as with attr ("checked") The Checked property of the checkbox can be obtained when the value is selected, the value is "checked", but the get value is undefined.
JQ provides a new method of "prop" to get these properties, which is to solve this problem, we used attr to get the checked property when we return "checked" and "", and now use the Prop method to get the property is unified return True and false.
So, when to use attr (), when to use Prop ()?
1. Add property name This property will take effect should use Prop ();
2. There are true,false two attributes using prop ();
3. The other uses attr ();
The following are the official recommendations for the use of attr (), prop ():
| Attribute/property | .attr() |
.prop() |
|---|---|---|
| AccessKey | √ | |
| Align | √ | |
| Async | √ | √ |
| Autofocus | √ | √ |
| Checked | √ | √ |
| Class | √ | |
| Contenteditable | √ | |
| Draggable | √ | |
| Href | √ | |
| Id | √ | |
| Label | √ | |
| Location (i.e. window.location) | √ | √ |
| Multiple | √ | √ |
| ReadOnly | √ | √ |
| Rel | √ | |
| Selected | √ | √ |
| Src | √ | |
| TabIndex | √ | |
| Title | √ | |
| Type | √ | |
Width (if needed over .width() ) |
√ |
Here is the HTML code that implements the select all and the inverse, to refer to the jquery script. Jquery1.6 and above are OK.
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <Scripttype= "Text/javascript"src= "Jquery-1.9.1.js"></Script></Head><Body><inputtype= "checkbox"value= "Select All"ID= "Cball"name= "Cbarea">Select All<BR/><inputtype= "checkbox"value= "Luolong District"name= "a">Luolong District<inputtype= "checkbox"value= "Jianxi District"name= "a">Jianxi District<inputtype= "checkbox"value= "Kili District"name= "a">Kili District<inputtype= "checkbox"value= "Xigong District"name= "a">Xigong District<inputtype= "checkbox"value= "Yiyang County"name= "a">Yiyang County<inputtype= "checkbox"value= "Old Town"name= "a">Old Town<inputtype= "checkbox"value= "Hui District"name= "a">Hui District<inputtype= "checkbox"value= "Yanshi"name= "a">Yanshi<inputtype= "checkbox"value= "haha zone"name= "a">haha District<inputtype= "checkbox"value= "Luoning area"name= "a">Luoning District</Body></HTML><Scripttype= "Text/javascript"> $(function () { $("#cbAll"). Click (function () { if($("#cbAll"). Is (": Checked")) { $(": CheckBox"). Prop ("checked",true); } Else { $(": CheckBox"). Prop ("checked", false); } }); $(": CheckBox"). Click (function () { if (!$( This). Is (": Checked")) { $("#cbAll"). Prop ("checked", false); } }); })</Script>View Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
