Definition of jQuery prop checked

jQuery Prop checked is defined as an attribute that allows tracking the current status of a checkbox as a part of the manipulation of a Document Object Model acronym’d as DOM. Jquery allows different methods through which one can enable manipulation in the DOM. These manipulations can vary from editing an element in the attributes, or setting a value to the element’s properties, or more simplistically act as getters of the DOM. jQuery not only belongs to the group of getters but also to the other category of the group of the set. They have the capability to modify even the entire elements or the group of elements through insertion, copy, removal, etc. In this article, we will look at the different aspects of prop-checked functionality in jQuery.

Syntax:

As we already know by now that manipulation in jQuery can be done to get either the value of the first element’s property in a list of matched elements or a collection of one or more properties for that matched element. In this section we will look into the corresponding syntax that is applicable for prop checked in jQuery.

Generic syntax of the prop method:

$().prop(val1, val2)

Checking the state of the checkbox in an HTML markup:

$().prop("checked")

Declaring or specifying the value of the pop-up container:

$().prop("checked", );

How prop checked works in jQuery?

By now we have a fair understanding that there are different methodologies in getting the status of a checkbox using jQuery. One such method is by using prop method. This is an inbuilt query method that not only gets the values of the selected elements but also allows the developer to set the value of the property of the check box using the method.

In case the prop method is used for getting the property value, we source the value from the first element that gets matched. In the syntax, if we look at it in-depth, $(selector).prop(val1, val2) the selector is the attribute of the element that the checkbox is referenced to. Using the val1 value, we would specify the property and when the corresponding val1 property is matched from the list of the available elements. We source the FIRST one from it and present its current state.

On a similar line, when the prop method is used for setting a property value, we declare the value of the element through val1 in the syntax and correspondingly substitute the val2 of the property that signifies the value which that property has to be set. Using the same logic as before we would try to first match the corresponding element through matching it with the value specified in the val1 and then correspondingly change the values as specified in val2. One would be intrigued to know that a list of values that needs to be changed for val1 can also be passed through val2. The one or more properties as listed in the val2 equivalent in the code will be read and accordingly, the values will be set.

One striking similarity of .prop property with .attr property makes it sometimes confusing for developers to be in a fix while choosing on which one to use for the specified use case. A small not of difference keeping in mind the adherence to the limit of the article is that the .prop() property enables developers to retrieve property values explicitly whereas on the other hand, .attr() method allows retrieval on only attributes.

In the examples below, we will go through respective bits of how can one use .prop() for retrieval of the attribute of an element and also setting of a value of one of the elements. In the last, example we will look into how a small change in attributes leads to big differences in the visual perspective.

Examples

Example #1

Pop Up menu in JavaScript and sliding animation:

Syntax













Toggle between check and uncheck option to see the change

Output

With check box “Checked”

With check box “Unchecked”

Example #2

Disabling a check box using the prop method in jQuery:

Syntax


















Output:

Example #3

Enabling back the check box which is mentioned in the earlier example using the prop method in jQuery:

Syntax


















Output:

Conclusion

With the help of this article, we have understood various ways in which .prop() method can be used and also going in-depth of each of the possibilities through examples in jQuery. With this, we would encourage readers to get the essence of prop checked in jQuery and try to build an application by merging examples 2 and 3 through the utilization of a click button by which the user can toggle!

Recommended Articles

This is a guide to jQuery prop checked. Here we discuss the Definition, syntax, parameters, How prop checked works in jQuery? respectively. You may also have a look at the following articles to learn more –

1. jQuery post
2. jQuery keycode
3. jQuery replace class
4. jQuery ajax request

The post jQuery prop checked appeared first on EDUCBA.