jQuery - Property method

In this tutorial we will learn about jQuery property prop() method.

prop()

We use the prop() method to perform the following tasks.

• Set property value
• Get property value

prop: Set property value

To set the property of an HTML element we pass the property name and value to the prop() method.

In the following example we are setting the checked property to true for a checkbox input field having id "sample-input-checkbox1".

$("#sample-input-checkbox1").prop("checked", true);

We can also pass plain object having property-value pair to set the property.

In the following example we are setting the checked property to true for an input checkbox having id "sample-input-checkbox1".

$("#sample-input-checkbox1").prop({
  "checked" : true
});

Another way of setting property value is given below

$("#sample-input-checkbox1").prop("checked", function(i, val) {
  console.log("Index: " + i);
  console.log("Prev value of the property: " + val);

  // return the inverse value
  return !val;
});

The above code will print the index and previous value of the sample input checkbox and it will return opposite value of the previous value. So, if the checkbox checked property was set to true then the function will return false and vice versa.

If multiple elements are selected then prop() method can set value for them.

In the following example we have 4 checkbox element each having the same class "sample-checkbox". We are using the prop() method to check all the checkbox by default.

HTML

<input type="checkbox" class="sample-checkbox">Apple
<input type="checkbox" class="sample-checkbox">Mango
<input type="checkbox" class="sample-checkbox">Orange
<input type="checkbox" class="sample-checkbox">Pomegranate

jQuery

$(".sample-checkbox").prop({
  "checked" : true
});

Get the property value

To get the property value we have to pass the name of the property to the prop() method.

In the following code we are printing out the checked status of a checkbox. We will get true if the checkbox is checked otherwise, false.

console.log( $("#sample-input-checkbox1").prop("checked") );

If multiple elements are selected then prop() method will return value of the first selected method.

In the following example we have 4 checkbox element but only the property of the first checkbox is printed in the console.

HTML

<input type="checkbox" class="sample-checkbox" checked>Apple
<input type="checkbox" class="sample-checkbox">Mango
<input type="checkbox" class="sample-checkbox" checked>Orange
<input type="checkbox" class="sample-checkbox">Pomegranate

jQuery

console.log( $(".sample-checkbox").prop("checked") );

To print checked value of all the checkbox we have to use the each() method.

$(".sample-checkbox").each(function(index, elem){
  console.log("Index: " + index);
  console.log( $(elem).prop("checked") );
});

The above code will loop through all the elements (checkbox) having class "sample-checkbox" and will print their index and value of the checked property.