Home >Web Front-end >JS Tutorial >jquery determines the checked status of the check box and distinguishes attr and prop_jquery

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

WBOYOriginal: 2016-05-16 15:25:001952browse

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

3bf9641bf4d128c196981f801f852009Baidu5db79b134e9f6b82c0b36e0489ee08ed
In this example, the DOM attributes of the 3499910bf9dac5ae3c52d5ede7383485 element include "href, target and class". These attributes are the attributes of the 3499910bf9dac5ae3c52d5ede7383485 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.

ddec45da1f9fc3d73ad4ec9e6cfd94cbDelete5db79b134e9f6b82c0b36e0489ee08ed
In this example, the DOM attributes of the 3499910bf9dac5ae3c52d5ede7383485 element include "href, id and action". Obviously, the first two are inherent attributes, while the latter "action" attribute is customized by us. The 3499910bf9dac5ae3c52d5ede7383485 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>

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Learn the return false_javascript trick in jQueyNext article：Learn the return false_javascript trick in jQuey

See more

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

Related articles