How to select an element by name with jQuery ?

Last Updated : 17 Sep, 2024

Selecting an element by name with jQuery allows you to target HTML elements using their `name` attribute. This method is commonly used in form handling, where input fields, checkboxes, or radio buttons share the same name, enabling you to easily manipulate or retrieve their values.

Table of Content

Using the name selector Method
Using JavaScript getElementsByName() Method with jQuery

We will understand both methods with the help of examples.

Using the name selector Method

The name selector method in jQuery uses the [name="nameOfElement"] syntax to select elements based on their name attribute. This method precisely targets elements with matching names, making it ideal for form elements like inputs and radio buttons that share a common name.

Syntax:

[name="nameOfElement"]

Example: In this example we use jQuery to select an element by its name attribute. When the button is clicked, the selectByName() function hides the input with the name="area".

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to select an element by name with jQuery?
    </title>
</head>

<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>How to select an element by name with jQuery?</b>
        <p>
            The textbox below has the <b>name attribute 'address'.</b>
        <form>
            <textarea rows="4" 
                      cols="40" 
                      name="address">
            </textarea>
        </form>
        </p>

        <p>
            The textbox below has the
            <b>name attribute 'area'.</b>
        <form>
            <input type="text" name="area">
        </form>
        </p>

        <p>Click on the button to hide the input with
            the name 'area'</p>

        <button onclick="selectByName()">
            Click to hide the area input
        </button>
    </center>

    <script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
    <script type="text/javascript">
        function selectByName() {
            element = $('[name="area"]');

            // Hide the element
            element.hide();
        }
    </script>
</body>

</html>

Output:

Using JavaScript getElementsByName() Method with jQuery

The JavaScript getElementsByName() method selects elements by their name attribute and returns a NodeList. This list can be passed to jQuery using $() to convert it into a jQuery object, allowing further manipulation with jQuery methods like hide() or show().

Syntax:

selector = document.getElementsByName('nameOfElement');
element = $(selector);

Example: In this example we use JavaScript's getElementsByName() method with jQuery to select the textarea with the name="address". When the button is clicked, the selectByName() function hides the selected element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
      How to select an element by name with jQuery?
      </title>
</head>

<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>How to select an element by name with jQuery?</b>
        <p>
            The textbox below has the 
              <b>name attribute 'address'.</b>
        <form>
            <textarea rows="4" cols="40" name="address"></textarea>
        </form>
        </p>

        <p>
            The textbox below has the 
              <b>name attribute 'area'.</b>
        <form>
            <input type="text" name="area">
        </form>
        </p>

        <p>
          Click on the button to hide the
          input with the name 'address'
         </p>

        <button onclick="selectByName()">
            Click to hide the address input
        </button>
        <script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
        </script>
        <script type="text/javascript">
            function selectByName() {
                selector = document.getElementsByName('address');
                element = $(selector);

                // hide the element
                element.hide();
            }
        </script>
    </center>
</body>

</html>

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more". Please refer to the jQuery Tutorial and jQuery Examples article for further details.