On the checkbox problem in jquery _jquery

First code:

<! DOCTYPE html>  

When using a method with jquery attr (), there is a corresponding problem, such as when you click on the Id=all checkbox before clicking on the checkbox below Id=list, when you click on the Id=all check box will appear before the click of the checkbox does not change, However, when viewing an element, the checked value of the check box is found to change accordingly. I looked up the data and the problem was as follows:

It turned out to be a jquery version problem. Because this is attr (), and the jquery version is 3.1.0, there is a compatibility issue.

$ ("XXX"). attr ("Attrname"); the jquery version uses 2.1.1, which is a compatibility and stability issue.

The jquery API clearly shows that 1.6+ jquery uses prop, especially the checked properties of the checkbox,

Even with the following code:

$ (function () {
    $ (' #all '). Click (function () {
      if (this.checked) {
        $ ("#list: CheckBox"). each (function () {
          $ (this). Prop ("checked", true);  Selector to be separated by spaces
        })
      } else {
        $ (' #list: CheckBox '). each (function () {
          $ (this). Prop ("checked", false);
        })
      }

    });

Give the full selection and the total no selection using jquery:

<! DOCTYPE html>  

Use soundtrack JS to select All and do not select all

<! DOCTYPE html>  

Finally insert the difference between attr () and prop ():

jquery1.6 a new method prop (), the official explanation is only one sentence: Gets the property value of the first element in the matching set of elements.

We all know that some browsers as long as the disabled,checked can be written, and some to write disabled = "disabled", checked= "checked", such as with attr ("checked") When the checkbox's Checked property is fetched, the value can be taken, the value is "checked", but the fetch value is not selected undefined.

JQ provides a new method "prop" to get these properties, which is to solve the problem, we used attr to get checked properties when we returned "checked" and "", and now we use the prop method to get the property then the uniform returns True and false.

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

1. Add attribute name This property will take effect should use Prop ();

2. There are true,false two attributes using prop ();

3. Others use attr ();

You should pay attention to this when you upgrade jquery in your project!

The following is the use of the official recommendation 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 ())	√

The above article on the checkbox in jquery is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.