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.
<!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.
<!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>
Output:
