jQuery even() method

The even() method in jQuery is used to select the elements with even index numbers (such as 2, 4, 6, etc.). The index starts with 0. It works similar to the odd() method, but it selects even numbers.

The even() method returns the even indexed elements from the set of selected elements. This method is used without any arguments.

Syntax

It does not accept any parameter.

Let's see some of the illustrations to understand the working of the even() method.

Example1

It is a simple example of using the even() method. In this example, we are using the even() method to select the list items with an even index. There are ten list items starting from 0 to 9. The index starts from 0. So, on clicking the given button, the method will select the list elements that appeared on even index values.

We have to click the given button to see the effect.

<html>
<head>
<title> jQuery even() method </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the jQuery even() method. The index starts from 0. </h4>
<ul>
	<li> 0 </li>
	<li> 1 </li>
	<li> 2 </li>
	<li> 3 </li>
	<li> 4 </li>
	<li> 5 </li>
	<li> 6 </li>
	<li> 7 </li>
	<li> 8 </li>
	<li> 9 </li>
</ul>

<p> Click the below button to select the elements with even index. </p>
<button> Click me </button>

<script>
$(document).ready(function(){
	$("button").click(function() {
	$("li").even().css("background-color", "yellow");
    });
	});
</script>

</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

It is another example of using the even() method. In this example, there are some checkboxes. We are using the even() method to select the even checkboxes. Here, there are six checkboxes starting from the zero indexes. The index starts from 0. So, on clicking the given button, the method will select the checkboxes that appeared on even index values.

We have to click the given button to see the effect.

<html>
<head>
<title> jQuery even() method </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the jQuery even() method. </h4>
<p> The index starts from 0. </p>

    Java <input type = "checkbox"> � � � �
  
    CSS <input type = "checkbox"> � � � �
  
    ES6 <input type = "checkbox"> � � � �
  
    HTML <input type = "checkbox"> � � � �
  
    jQuery <input type = "checkbox"> � � � �
	
	Bootstrap <input type = "checkbox">

<p> Click the below button to select the even options. </p>
<button> Click me </button>

<script>
$(document).ready(function(){
	$("button").click(function() {
	$("input").even().attr("checked", true);
    });
	});
</script>

</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -