jquery determines the checked status of the check box and distinguishes attr and prop

jquery determines the checked status of the check box and distinguishes attr and prop_jquery

WBOY

Release： 2016-05-16 15:25:00

Original

1951 people have browsed it

In a recent project, I needed to use jquery to determine whether the checkbox in the input was selected. I found that using attr() could not get the changed state of the checkbox. Finally, I checked the information and found that jQuery 1.6 has added a new prop() method, borrowing from the official A description of it is:

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
The translation of the above is probably: prop() handles the attributes that come from the node object, which contains many native properties; and attr() comes from the attributes of the object, which may be the attributes we add on the element node. Only nodes will exist. Of course, the previous translation only represents my own point of view. If there are any mistakes, you can point them out~~

To put it simply:

For the inherent attributes of the HTML element itself, use the prop method when processing.
For our own custom DOM attributes of HTML elements, when processing, use the attr method.
The above description may be a bit vague. I will quote some blog content from experts and add my tests to give a few examples.

First example: Inherent attributes and custom attribute descriptions of the element

http://www.baidu.com" target="_self" class="btn">Baidu
In this example, the DOM attributes of the element include "href, target and class". These attributes are the attributes of the element itself. These attributes are also included in the W3C standard, or in other words, The properties that can be intelligently prompted in the IDE are called intrinsic properties. When dealing with these properties, it is recommended to use the prop method.

Delete
In this example, the DOM attributes of the element include "href, id and action". Obviously, the first two are inherent attributes, while the latter "action" attribute is customized by us. The element It itself does not have this attribute. This is a custom DOM attribute. When dealing with these attributes, it is recommended to use the attr method. When using the prop method to get values and set property values, undefined values will be returned.

Second example: The difference between prop() and attr() in form applications

Let’s first look at a piece of code using the attr() method:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用attr（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").attr("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").attr("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

Copy after login

The test result of the above program is:

As can be seen from the dynamic diagram, using attr() cannot obtain the user's selected status. It only returns the initial value of the form.

Let’s look at a piece of code using the prop() method:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用prop（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").prop("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").prop("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

Copy after login

The test result of the above program is:

As can be seen from the dynamic diagram, prop() can be used to obtain the user's selection and cancellation operation status in real time.

So the difference I summarize is: the value recorded by the property will be updated in real time according to the user's operation, while the value recorded by the attribute is the initial value, which only represents my own opinion.

I hope this article will be helpful to everyone in learning javascript programming.