Skip to content
Related Articles

Related Articles

jQuery [attribute~=value] Selector

Improve Article
Save Article
  • Last Updated : 16 Nov, 2022
Improve Article
Save Article

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=
    </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=
    </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>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!