How to select an element by name with jQuery

Any jQuery element attribute can be selected using [attribute_name=value].
$("[name='nameofobject']");
It is a mandatory requirement to include quotes around the value. Example
<input type="text" name="myTxt" value="" />
$( "input[name='myTxt']" ).css("background-color", "red");
run this source code Browser View

Full Source | jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnSubmit").click(function(){ $( "input[name='myTxt']" ).css("background-color", "red"); }); }); </script> </head> <body> <input type="text" name="myTxt" value="" /><br><br> <input id = "btnSubmit" type="submit" value="Click this button to change Back Color"/> </body> </html>
Also, you can use the jQuery attribute selector:
$('td[name*="myTxt"]' ) // Matches those that contain 'myTxt' $('td[name="myTxt"]') // Matches exactly 'myTxt' $('td[name^="myTxt"]' ) // Matches those that begin with 'myTxt' $('td[name$="myTxt"]' ) // Matches those that end with 'myTxt'

Multiple selction by attribute

You can select multiple element attribute by its name.
<input name="myTxt-1"> <input name="myTxt-2"> <input name="myTxt-3">
$( "input[name*='myTxt-']" ).css("background-color", "blue");
run this source code Browser View




Full Source | jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnSubmit").click(function(){ $( "input[name*='myTxt-']" ).css("background-color", "blue"); }); }); </script> </head> <body> <input name="myTxt-1"><br> <input name="myTxt-2"><br> <input name="myTxt-3"><br> <input name="text-4"><br> <input id = "btnSubmit" type="submit" value="Click this button to change Back Color"/> </body> </html>

Using JavaScript


Attribute Starts With Selector
In JavaScript, you can select element attribute by using getElementsByName().
<input name="myTxt"> var txts = document.getElementsByName("myTxt");
run this source code Browser View




Full Source | jQuery
<!DOCTYPE html> <html> <head> <script> function setValue() { var txts = document.getElementsByName("myTxt"); for (var tx of txts) { tx.style.backgroundColor = "yellow"; } } </script> </head> <body> <input name="myTxt"><br> <input name="myTxt"><br> <input name="myTxt"><br> <input name="text-4"><br> <button type="button" id="btn" onclick="setValue()">Set Color</button> </body> </html>

jQuery element Selector

The jQuery element selector selects elements based on the element name.

You can select all ‹input› elements on a page like this:

$("input")
Example

When a user clicks on a button, all ‹input› elements will be hidden:

<input> $("input").hide();

jQuery #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

Example
<input id="test"> $("#test")

jQuery .class Selector

The jQuery .class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

Example
<input class="test"> $(".test")