Home »
jQuery »
jQuery Examples
jQuery Same Click Event For Multiple Elements
Learn how can we select multiple elements and perform same actions on them using jQuery?
Submitted by Pratishtha Saxena, on February 11, 2023
You may be familiar with the technique where an element is selected and further actions are performed on it accordingly. But what to do when the same action has to be performed not only on a single element but altogether on a heterogeneous set of elements? Now, this task is all about how to mention the elements for selection. Let's move on to that part.
Since we need to select multiple elements on the document, we use a multiple-element selector, i.e., all the elements to be selected are mentioned together with the comma in between them. Only the name of the element, say 'div' for a <div> element, will be passed in order to access it.
In order to select multiple elements with their tag names all at once, we can pass different element names altogether with a comma between them.
Syntax:
$('element_name_1, element_name_2, element_name_3, ...');
Once the element is selected, you can access those and perform the actions that you want to perform on them. The example given below shows the selection of all the elements on click by passing the appropriate tag names.
jQuery example for the same click event for multiple elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<style>
div{
color: slategrey;
padding: 1%;
font-weight: bold;
font-style: italic;
}
p{
color: darkred;
padding: 1%;
font-weight: bold;
font-style: italic;
}
span{
color: indigo;
padding: 1%;
font-weight: bold;
font-style: italic;
}
.newClass{
color: olivedrab;
font-size: large;
background-color: aliceblue;
padding: 0;
}
</style>
</head>
<body>
<h2>jQuery same click event for multiple elements</h2>
<h4>Click the button to perform same actions on different elements.</h4>
<button>Click Here</button>
<hr>
<div>Welcome to Include Help !</div>
<p>This is a JavaScript Tutorial.</p>
<span>Thanks for Visiting !</span>
<hr>
<h4 id="one"></h4>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
// Multiple elements listed together
$('div, p, span').addClass('newClass');
});
});
</script>
</html>
Output:
After clicking on "Click Here" button.
Also, if you wish to select all the elements in the document, then providing their tag names would be a lengthy task to do. Hence, for that situation, the '*' tag is used which indicates that all the elements on the page have been selected. See the below example where when the button is clicked, each element has changed CSS.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<style>
div{
color: slategrey;
padding: 1%;
font-weight: bold;
font-style: italic;
}
p{
color: darkred;
padding: 1%;
font-weight: bold;
font-style: italic;
}
span{
color: indigo;
padding: 1%;
font-weight: bold;
font-style: italic;
}
.newClass{
color: olivedrab;
font-size: large;
background-color: aliceblue;
padding: 0;
}
</style>
</head>
<body>
<h2>jQuery same click event for multiple elements</h2>
<h4>Click the button to perform same actions on different elements.</h4>
<button>Click Here</button>
<hr>
<div>Welcome to Include Help !</div>
<p>This is a JavaScript Tutorial.</p>
<span>Thanks for Visiting !</span>
<hr>
<h4 id="one"></h4>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
// All elements selected
$('*').addClass('newClass');
});
});
</script>
</html>
Output:
After clicking on "Click Here" button.
