jQuery [attribute~=value] Selector

Last Updated : 11 Jul, 2025

jQuery [attribute~=value] Selector Select all elements with a name attribute that contains the specific string.

Syntax:

$("[attribute~='string']")

Parameter:

attribute: Specifies which attribute is used to find.
string: Specifies the string value to find.

Example 1: In this example, we will select all the elements which have name attribute by using jQuery [attribute~=value] Selector.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $("input[name~='GFG']").css("background-color",  "LIGHTGREEN");  });  </script> </head> <body> <input name="GFG" type="text" value="GEEKSFORGEEKS"> <input name="2" type="text" value="SITE1"> <input name="3" type="text" value="SITE2"> <input name="GFG" type="text" value="GEEKSFORGEEKS"> <input name="GFG" type="text" value="GEEKSFORGEEKS"> <input name="4" type="text" value="SITE4"> <input name="GFG" type="text" value="GEEKSFORGEEKS"> </body> </html>

Output:

Example 2: In this example, we will change the color of all the elements which have name attribute with the help of click function.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $("button").click(function () {  $("input[name~='GFG']").css("color",  "GREEN");  });  });  </script> </head> <body> <input name="GFG" type="text" value="GEEKSFORGEEKS"> <input name="1" type="text" value="SITE1"> <input name="GFG" type="text" value="GEEKSFORGEEKS"> <input name="2" type="text" value="SITE2"> <input name="3" type="text" value="SITE3"> <input name="GFG" type="text" value="GEEKSFORGEEKS"> <input name="4" type="text" value="SITE4"> <input name="GFG" type="text" value="GEEKSFORGEEKS"> <br><br> <button>Change color</button> </body> </html>