How to Select Elements by Name in jQuery

By the end of this page, you will understand how jQuery selectors work, why $("tcol1") does not select an element by name, and how to correctly use an attribute selector like $("[name='tcol1']"). You will also see practical examples, common mistakes, and patterns used in real projects.

In jQuery, selectors mostly follow CSS selector rules. That means the string you pass into $() is interpreted as a selector.

When you write:

$(".bold")

jQuery reads that as a class selector and finds all elements with the class bold.

When you write:

$("tcol1")

jQuery reads that as an element selector, meaning it looks for HTML tags named <tcol1>. Since your HTML does not contain a <tcol1> element, nothing is matched.

If you want to select by an attribute such as name, you must use an attribute selector:

$("[name='tcol1']")

This tells jQuery to find any element whose name attribute equals tcol1.

This matters because selecting the right elements is one of the most common tasks in frontend programming. Whether you are hiding fields, validating forms, attaching event handlers, or updating table cells, understanding selector syntax helps you target the correct DOM elements reliably.

Think of HTML elements as boxes with labels attached.

• A tag selector like $("td") means: "Find every box of type td."
• A class selector like $(".bold") means: "Find every box with the label bold."
• An ID selector like $("#price") means: "Find the one box with the unique label price."
• An attribute selector like $("[name='tcol1']") means: "Find every box whose name sticker says tcol1."

So $("tcol1") does not mean "find elements with name tcol1". It means "find <tcol1> tags."

Core syntax

Select by class

$(".bold")

Selects all elements with class="bold".

Select by tag name

$("td")

Selects all <td> elements.

Select by ID

$("#myCell")

Selects the element with id="myCell".

Select by attribute

$("[name='tcol1']")

Selects all elements where name="tcol1".

Your example

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

$("[name='tcol1']").hide();

This hides every <td> whose name attribute is tcol1.

More specific example

If you want only table cells with that name:

$("td[name='tcol1']").hide();

This is more precise because it limits the match to <td> elements only.

Reading the value instead of selecting

If you already have an element and want to read its name:

const nameValue = $("td.bold").first().attr("name");
console.log(nameValue); // tcol1

Here, .attr("name") reads the attribute value from the first matching element.

Consider this code:

<table>
  <tr>
    <td>data1</td>
    <td name="tcol1" class="bold">data2</td>
  </tr>
  <tr>
    <td>data1</td>
    <td name="tcol1" class="bold">data2</td>
  </tr>
</table>

$("td[name='tcol1']").hide();

Here is what happens step by step:

1. jQuery receives the selector string:

   "td[name='tcol1']"
   

2. It breaks it into parts:

   • td means only look at <td> elements.
   • [name='tcol1'] means only keep the ones whose name attribute equals tcol1.

3. jQuery searches the DOM for matching elements.

4. In your table, both second-column cells match:

   <td name="tcol1" class="bold">data2</td>
   

5. jQuery builds a collection of those matching elements.

6. .hide() is called on that collection.

7. jQuery applies inline styles so those cells are no longer displayed.

Result: all matching cells become hidden.

Traceable example

const cells = $("td[name='tcol1']");
console.log(cells.length); // 2
cells.hide();

• First line: finds matching cells.
• Second line: shows how many were found.
• Third line: hides them all at once.

Selecting elements by attribute is useful in many practical situations:

Form fields with the same name

<input type="checkbox" name="interest" value="music">
<input type="checkbox" name="interest" value="sports">
<input type="checkbox" name="interest" value="coding">

$("[name='interest']")

This is common when working with groups of checkboxes or radio buttons.

Table columns marked with metadata

<td name="price">19.99</td>
<td name="price">29.99</td>

$("td[name='price']").addClass("highlight");

Useful for showing, hiding, or styling a column.

Dynamic UI behavior

$("[name='advancedOptions']").hide();

You might hide advanced settings until a user clicks a toggle.

Validation or bulk updates

$("input[name='email']").val("test@example.com");

This can be used in test scripts, admin tools, or autofill features.

In real projects, developers usually combine attribute selectors with other patterns for clarity and safety.

More specific selectors

Instead of:

$("[name='tcol1']")

developers often write:

$("td[name='tcol1']")

This avoids accidentally selecting non-td elements with the same name.

Guarding against missing elements

const $cells = $("td[name='tcol1']");
if ($cells.length) {
  $cells.hide();
}

This is helpful when markup may vary across pages.

Toggling visibility

const $column = $("td[name='tcol1']");
$("#toggleColumn").on("click", function () {
  $column.toggle();
});

A common UI pattern for show/hide behavior.

Using data attributes instead

In many codebases, developers prefer custom data-* attributes for metadata:

<td data-column="tcol1">data2</td>

$("td[data-column='tcol1']")

This is often clearer and more semantic than using name on a <td>.

Combining with iteration

$("td[name='tcol1']").each(function () {
  console.log($(this).text());
});

This pattern is useful when applying logic to every matched element.

1. Forgetting selector syntax

Broken code:

$("tcol1").hide();

Why it fails:

• jQuery treats tcol1 as a tag selector.
• It searches for <tcol1> elements, not name="tcol1".

Correct code:

$("[name='tcol1']").hide();

2. Confusing class, ID, and attribute selectors

Broken code:

$("#tcol1").hide();

This only works if the element has:

id="tcol1"

If your HTML is:

<td name="tcol1">data2</td>

then use:

$("[name='tcol1']")

3. Using name where another attribute is better

While jQuery can select by name, name is most commonly used on form elements like <input> and <select>.

For table cells, a class or data-* attribute may be clearer:

<td data-column="tcol1">data2</td>

$("td[data-column='tcol1']")

4. Making selectors too broad

This works:

$("[name='tcol1']")

But if multiple element types share that name, you may affect more than intended.

Safer:

$("td[name='tcol1']")

5. Expecting .hide() to remove elements

.hide() only hides elements visually. It does not delete them from the DOM.

$("td[name='tcol1']").hide();

If you need to remove them entirely, use:

$("td[name='tcol1']").remove();

Class vs name

Which should you use here?

For your exact HTML, these all work depending on intent:

• $(".bold") if you want all bold cells
• $("[name='tcol1']") if you want elements by attribute value
• $("td[name='tcol1']") if you want the most precise match

// By class
$(".bold")

// By ID
$("#myId")

// By tag
$("td")

// By attribute
$("[name='tcol1']")

// By tag + attribute
$("td[name='tcol1']")

// Hide matched elements
$("td[name='tcol1']").hide();

// Show matched elements
$("td[name='tcol1']").show();

// Toggle matched elements
$("td[name='tcol1']").toggle();

// Count matched elements
$("td[name='tcol1']").length

// Read an attribute
$("td[name='tcol1']").first().attr("name")

Quick rules

• "tcol1" means an element/tag selector, not a name selector.
• Use [name='value'] to select by name.
• Use td[name='value'] for a more specific match.
• .hide() hides elements but does not remove them.
• Consider data-* attributes for custom metadata on non-form elements.

How do I select an element by name in jQuery?

Use an attribute selector:

$("[name='tcol1']")

Why does $("tcol1") not work in jQuery?

Because jQuery interprets it as a tag selector and looks for <tcol1> elements.

Can I select only <td> elements with a specific name?

Yes:

$("td[name='tcol1']")

Is name a good attribute to use on <td> elements?

It works for selection, but class or data-* is often clearer for non-form elements.

What is the difference between .hide() and .remove()?

• .hide() keeps the element in the DOM but makes it invisible.
• .remove() deletes the element from the DOM.

Can multiple elements have the same name?

Yes. This is common, especially with form inputs and grouped elements.

Should I use class or name for grouping elements?

Use class for styling and general grouping. Use name when the attribute has meaningful grouping behavior. Use data-* for custom app-specific metadata.

• jQuery selectors — The broader topic that explains class, ID, tag, and attribute selection.
• CSS selectors — jQuery selector syntax is heavily based on CSS selector rules.
• DOM manipulation — After selecting elements, you often hide, show, update, or remove them.
• HTML attributes — Understanding attributes like class, id, name, and data-* helps you choose the right selector.
• jQuery .attr() — Useful for reading or changing attribute values.
• jQuery .hide() and .show() — Common methods used after selecting elements.
• data attributes — A cleaner alternative for storing custom metadata on HTML elements.
• Event handling in jQuery — Often combined with selectors to react to clicks, changes, and other user actions.