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" =>data2


  data1
  data2


  data1
  data2

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:

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>

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

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:

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

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 ?

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