The analysis of the whole selection and inverse selection of Jquery

In recent work, you need to use jquery to implement check box selection and anti-selection, although I am not full-time, but this small problem feel also no difficulty, the following direct code:

        <DivID= "List">         <ulclass= "Mui-table-view textoverflow"ID= "Noteslist" >                                 <Li><inputtype= "checkbox"name= "Notices"value= "1">Basketball</Li>                <Li><inputtype= "checkbox"name= "Notices"value= "1">Football</Li>                <Li><inputtype= "checkbox"name= "Notices"value= "1">Table tennis</Li>                <Li><inputtype= "checkbox"name= "Notices"value= "1">Badminton</Li>                <Li><inputtype= "checkbox"name= "Notices"value= "1">Volleyball</Li>                 </ul>    </Div>    <inputtype= "button"ID= "All"value= "Select All/Select All">    <inputtype= "button"value= "Select All"class= "BTN"ID= "SelectAll">      <inputtype= "button"value= "All is not selected"class= "BTN"ID= "Unselect"> 

The code for jquery is implemented like this:

$ ("#list: CheckBox"). each (function  () {                if ($ (Thistrue)                       { $ (this). attr ("Checked",false);                }                 Else {                                   $ (this). attr ("Checked",true);                  }                              

Logically there is no problem, but the result is unexpectedly, after the selection, click again, the page did not respond, first check the code, found that there is no grammatical problems, continue to look for problems, I use Chrome browser, progress debug mode, found JS script also did not error, I just started to think that is the browser compatibility issues, using IE10, Firefox debugging still have this problem, is very distressed, on the Internet to find the answer, some people suggest that attr and prop in the use of jquery may not be the same, so go to find the jquery API,

Sure enough to find the information available, here is the official website document Description:

Attributes vs. Properties

The difference between attributes and properties is important in certain situations. before JQuery 1.6 , the method returns the value of the property .attr() when it takes the value of some attribute, which results in inconsistencies. starting with JQuery 1.6 , the .prop() method method returns the value of the property, and .attr() the method returns the value of attributes.

For example,,,,,, selectedIndex tagName ,, and the nodeName nodeType ownerDocument defaultChecked defaultSelected method should be used .prop() to take or assign values. These properties were obtained using methods prior to jQuery1.6, .attr() but this is not an attribute of the element attr . They have no corresponding attributes (attributes), only attributes.

For example, consider a DOM element that is defined in the HTML markup <input type="checkbox" checked="checked" /> and assume that it is a JavaScript variable namede

true   (Boolean) will change as the check box state changes

elem.checked	true   (Boolean) will change as the check box state changes
$ (elem). Prop ("checked")
elem.getattribute ("checked") the initial state of the	"checked"   (String) check box;
$ (elem). attr ("checked") &NBSP (1.6)	"Checked"   (String) check box in the initial state;
$ (E LEM). attr ("checked")   (1.6.1+)	"Checked"   (String) will change as the check box state changes
$ (elem). attr ("checked")   (pre-1.6)	true &nbs p; (Boolean) will change as the check box state changes

According to the form specification, the checked property is a Boolean property , which means that if this property (attribute) is present, even if the property does not have a corresponding value, or is set to an empty string value, or even "false", The corresponding property is true. This is the true all Boolean attribute (attributes).

However, the most important concept to keep in mind is that the checked attribute (attribute) does not correspond to its checked property. The attribute (attribute) actually corresponds to the defaultChecked property, and is used only to set the initial value of the check box. The attribute checked (attribute) value does not change due to the state of the check box, and checked the property is changed because of the check box's state. Therefore, a cross-browser-compatible method to determine whether a check box is selected is to use this property:

• if ( elem.checked )
• if ( $(elem).prop("checked") )
• if ( $(elem).is(":checked") )

For other dynamic properties, the same is true, for example, selected and value .

The API above is clear, checked is a Boolean attribute, and the checked attribute does not correspond to its Checked property, which corresponds to the defaultchecked attribute, that is, it does not change with the state of the check box.

At this point, I looked at my jquyer version.

<script type= "Text/javascript" src= "Jquery-1.11.1/jquery.min.js" ></script>

1.11.1 than 1.6.1 Several versions, I first put the above code attr method to replace all the prop method, test, through, so!

Then I downloaded a less than 1.6.1 version of jquery from the Internet, with the above code, you can also achieve a full select/reverse.

The analysis of the whole selection and inverse selection of Jquery