jQuery Select Multiple HTML Elements

jQuery select multiple elements; In this tutorial, i am going to show you how to select multiple html elements by id, class, name and tag, etc.

jQuery Select Multiple HTML Elements

There are two ways available to select multiple html elements using jQuery selectors:

element selector
* selector

Syntax of jQuery Element Selector

$("element1, element2, element3, ...");

Syntax of jQuery * Selector

Using the above syntax select multiple html elements.

 $("*");

Using the above syntax select all html elements.

Paramaters of jquery multiple selector

element: This parameter is required to specify the html elements to be selected.

Example 1 – jquery select multiple elements by id

See the following example for how to use multiple selector from selected html elements by id:

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Multiple Selector</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script> 
    $(document).ready(function() {
       $(".multiple").click(function(){    
         $("#m1, #m2, #m3, #m4").css("background-color", "green"); 
       });
    }); 
</script> 
</head> 
<body> 
<center> 
    <h2 style="margin-top: 10px;" id="m1">Welcome to laratutorials.com</h2> 
    <h3 id="m2">Hello</h3> <h2 id="m3">Hello</h2> 
    <p><span id="m4">Jquery</span></p> 
    <button type="button" class="multiple">Click Me!</button>
</center> 
</body> 
</html>

Demo for jquery select multiple elements by id

jQuery Multiple Selector

Welcome to LaraTutorials.com

Hello

Jquery

Example 2 – jquery select All elements by * Selector

This example will demostrate you how to use * selector from selected html elements. * Selector select all html elements.

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Multiple Selector</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script> 
    $(document).ready(function() {
       $(".multiple_star").click(function(){    
         $("*").css("background-color", "green"); 
       });
    }); 
</script> 
</head> 
<body> 
<center> 
    <h2 style="margin-top: 10px;" id="m1">Welcome to laratutorials.com</h2> 
    <h3 id="m2">Hello</h3> <h2 id="m3">Hello</h2> 
    <p><span id="m4">Jquery</span></p> 
    <button type="button" class="multiple_star">Click Me!</button>
</center> 
</body> 
</html>

Demo for jquery select All elements by * Selector

jQuery Multiple Selector

Welcome to Laratutorials.com

Hello

Jquery

When you click on button, at that time it will perform multiple selectors events of jquery and select all html elements.

jQuery Select Multiple HTML Elements