How to use jQuery prop() method in your website

How to use jQuery prop() method in your website

The jQuery Prop method – .prop(), gets or sets the property values of selected elements. These properties can be – border of an element, checkbox checked value, disabled, and so on.

Get the property – It can get a single property value of an element at a time.

Set the property – It can set multiple property values, of multiple elements, at a time.

Syntax of .prop() method

a. Returning a property value of an element


b. Set one single property value of one or more elements.


c. Using function to set one single property value of one or more elements


d. Set multiple property values of one or more elements

$(selector).prop({property:value, property:value,...})
Parameter Description
property name of the property. Examples ‘border’, ‘checkbox checked’, ‘disabled’ etc
value value of the property
function(index,currentvalue) function that returns the attribute value to set them
  • index – index position of the element in the selector
  • currentvalue – property value of current element
Related: The jQuery Attr method – .attr(), gets or sets the value of HTML attributes of elements. The HTML attributes can be width, height, title, value, src, href, etc.

Example 1: Get Border of an Image

The page has one image with a button.

<img src="animal.jpg" border="10px solid"/>
<button id="button1">Show Width</button>

To get the border of the image I can use .prop() method like this:

$("#button1").click(function (e) {
    alert("Width is: " + $("img").prop("border"));

The alert message box will show Border is: 10px solid.

Related article to the .prop() method – Check Uncheck All checkbox using jQuery

Example 2: Set Border of 2 Images

Here I have 2 images and a button.

<img src="cat1.jpg" />
<img src="cat2.jpg" />
<button id="button2">Set Border</button>

On the button click event I can set the border of these 2 images to 10px solid width from the jQuery Prop method.

$("#button2").click(function (e) {
    $("img").prop("border", "10px solid");

So on the button click event the width I am using .prop() to apply border to the images.

Example 3: Find Checkbox Checked Property Value

To find the checkbox checked property use the .prop() method like below:

<input type="checkbox" /> Checkbox
<button id="button3">Find</button>
$("#button3").click(function (e) {

In the alert box you will get the property value of checkbox.

Example 4: Set the Checkbox Checked Property

Consider you have a checkbox and 2 buttons. One button will check the checkbox and the other button will uncheck it.

<input type="checkbox" /> Checkbox
<button id="button4">Click to Check</button> 
<button id="button5">Click to Un-Check</button>

To check a checkbox on a button click pass true to the second parameter of .prop() method like shown below:

$("#button4").click(function (e) {
    $("input[type='checkbox']").prop("checked", true);

To uncheck the checkbox pass false to the second parameter of .prop() method.

$("#button5").click(function (e) {
    $("input[type='checkbox']").prop("checked", false);

Check the download link:



  • linkedin
  • reddit


I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate