How can I select an element by name with jQuery?

javascript jquery html dom jquery-selectors

1,962,106

Solution 1

You can use the jQuery attribute selector:

$('td[name="tcol1"]')   // Matches exactly 'tcol1'
$('td[name^="tcol"]' )  // Matches those that begin with 'tcol'
$('td[name$="tcol"]' )  // Matches those that end with 'tcol'
$('td[name*="tcol"]' )  // Matches those that contain 'tcol'

Solution 2

Any attribute can be selected using [attribute_name=value] way. See the sample here:

var value = $("[name='nameofobject']");

Solution 3

If you have something like:

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

You can read all like this:

jQuery("input[name='mycheckbox']").each(function() {
    console.log( this.value + ":" + this.checked );
});

The snippet:

jQuery("input[name='mycheckbox']").each(function() {
  console.log( this.value + ":" + this.checked );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

Solution 4

You could get the array of elements by name the old fashioned way and pass that array to jQuery.

function toggleByName() {
  var arrChkBox = document.getElementsByName("chName");
  $(arrChkBox).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>

note: the only time you would have a reason to use the "name" attribute should be for checkbox or radio inputs.

Or you could just add another class to the elements for selection.(This is what I would do)

function toggleByClass(bolShow) {
  if (bolShow) {
    $(".rowToToggle").show();
  } else {
    $(".rowToToggle").hide();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <table>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
    </table>
    <input type="button" onclick="toggleByClass(true);" value="show"/>
    <input type="button" onclick="toggleByClass(false);" value="hide"/>
  </body>
</html>

Solution 5

You can get the name value from an input field using name element in jQuery by:

var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD
var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ 
console.log(firstname);
console.log(lastname);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1">
  <input type="text" name="firstname" value="ABCD"/>
  <input type="text" name="lastname" value="XYZ"/>
</form>

View more solutions

1,962,106

Author by

T.T.T.

Updated on March 19, 2021

Comments

T.T.T. about 3 years
I have a table column I’m trying to expand and hide. jQuery seems to hide the <td> elements when I select it by class but not by the element’s name.

For example:
```
$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work.
```
Note the HTML below. The second column has the same name for all rows. How could I create this collection using the name attribute?
```
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold"> data2</td>
</tr>
```
- Mark W over 12 years
  
  Question does not match content. ID and name are different attributes and are selected differently
- Steve Tauber about 11 years
  
  It's against W3C standards to have elements with the same ID; i.e. duplicate IDs are a no no.
- Sebastian Simon about 3 years
  
  The CSS specification includes a new column combinator, so soon you can simply select document.querySelectorAll("td || col.secondColumn") if you have a <colgroup><col class="firstColumn"/><col class="secondColumn"/></colgroup>.
Jon Erickson almost 12 years

@Varun - you can just omit the td... for example $('[name^=tcol]') will match all elements that have an attribute 'name' with a value that starts with 'tcol'
relytmcd almost 6 years

for example if the field name is 'td[name="nested[fieldName]"]'
HoldOffHunger almost 6 years

This is very true. Newer versions of jQuery (v. 3.2.1) are much more likely to fail when encountering a attribute-based selector element without proper quoting.
barbsan almost 5 years

OP wanted to get by name, not id. And what is get.elementbyId()? Did you mean document.getElementById()?
barbsan almost 5 years

No, he is asking to select an element by name.
ericksho about 3 years

great info, but a lot of stuff that don't answer the question, it's just related knowledge
dylanh724 almost 3 years

OP asked by name, not id
Marcus over 2 years

Why does this answer appear at the top?
CalebHC over 2 years

@Marcus because it's the most rad answer of them all.
CalebHC over 2 years

@dylanh724 the question was originally about finding by name.