JQ, JS to determine whether the checkbox is selected

A checkbox was recently used in the development of a project, which encountered a problem: how can I tell if a checkbox is selected in JQ? The previous use of JQ to get the attributes of an element is attr (), but it is useless on a checkbox, for what reason???

1, JS to determine whether the checkbox is selected

For the JS to determine whether a checkbox is selected is very simple, for example?? For

HTML code:

<type= "checkbox " name= "box">

The corresponding JavaScript code is as follows:

var check = document.getelementsbytagname (' input ') [0];console.log (check.checked); // false        

Because the Checked property value is not set in the HTML code, it returns false by default, or True if you want to set the checkbox to selected in HTML:

<type= "checkbox " name= "box"  checked= "true ">

2, JQ to determine whether the checkbox is selected

(1), before the JQ1.6 version (excluding version 1.6) to determine whether the checkbox is selected using the attr () method, the HTML code is the same as above, only the JQ code:

Console.log ($ ("input[type= ' checkbox ']"). attr (' checked ')); // false

Don't think about using the prop () method before the JQ1.6 version, only $ () is reported. Prop () is a function error

(2), after the JQ1.6 version of jquery introduced the prop () method, and then use the attr () method to determine the status of the checkbox will return undefined, if there is a set checked property is True, will return checked instead of true

1.6+ version Prop () method:

Console.log ($ ("input[type= ' checkbox ']"). Prop (' checked ')); // false

(3), in addition to the above two methods JQ also has an IS () method can also determine the status of the checkbox

The IS () method code is as follows:

Console.log ($ ("input[type= ' checkbox ']"). Is (': checked ')); // false

Pay special attention not to miss the": Disabled" in the ":"

3, attr () and prop () How to choose

The attr () method is used to set or return the attribute value of the selected element ;

The prop () method is used to get the attribute value of the first element in the matching element collection ;

The interpretation of the attr () method is relatively easy to understand, prop () method to see the explanation or a face, what ghost ...

Find official documentation for jquery There is a comparison between the attributes and the properties, which is explained here:

Before jquery 1.6, the. attr () method sometimes takes property values into account when retrieving certain properties, which can lead to inconsistent behavior. Starting with jquery 1.6, the. Prop () method provides an explicit way to retrieve property values, whereas the. attr () method provides only the retrieval properties.

For example, you should use the. Prop () method to retrieve and set SelectedIndex,tagName,nodeName,nodeType, Ownerdocument,defaultchecked and defaultselected. Before jquery 1.6, these properties can be retrieved using the. attr () method, but this is not within the scope of attr.

It is not clear to remember that these several properties are marked in red.

Ps:attributes and properties are translated as "attributes"

To learn more about the difference between the attributes and the properties is worth digging in, and here today, rest.

JQ, JS to determine whether the checkbox is selected