jQuery Attribute Equals [name="value"]

What You’ll Learn

The attribute equals selector — written [name="value"] — matches elements whose attribute value is exactly equal to your search string. Matching is case-sensitive. It is the foundation of attribute selectors — ideal for type, name, and fixed option values — available since jQuery 1.0.

Introduction

Before prefix, suffix, or substring operators, there is the simplest attribute rule: exact equality. When you know the full attribute value — a button type, a field name, a country code in an option — the equals selector is the clearest choice.

The syntax [attribute="value"] checks whether the attribute string equals your search text with no extra characters before or after. jQuery has supported this selector since version 1.0, and browsers implement it natively through standard CSS attribute selectors.

Understanding the Equals Selector

Think of the attribute value as a label on a box. The selector asks: “Is this label exactly my text — nothing more, nothing less?” If yes, the element matches.

• value="Hot Fuzz" + [value="Hot Fuzz"] → matches.
• value="Hot Fuzz 2" + [value="Hot Fuzz"] → no match (extra characters).
• type="submit" + [type="submit"] → matches.
• type="button" + [type="submit"] → no match.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "[attribute='value']" )
// shorthand:
$( "[attribute='value']" )

// common patterns:
$( "input[value='Hot Fuzz']" )
$( "input[type='submit']" )

Parameters

• attribute — the HTML attribute name (name, value, type, etc.).
• value — exact string the attribute value must equal (case-sensitive). Can be a valid identifier or a quoted string.

Return value

• A jQuery object containing every element whose attribute equals the value.
• Empty collection when no values match.

Official jQuery API example

$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );

// Matches only value="Hot Fuzz"
// Does NOT match value="Hot Fuzz 2" or value="hot fuzz"

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 cover exact-match rules, operator comparison, submit buttons, and scoped form fields. Use the Try-it links to run each snippet.

$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );

// Matches: value="Hot Fuzz"
// Skips: value="Cold Fuzz", value="Hot Fuzz 2", value="hot fuzz"

input value="Hot Fuzz" → next span text "Hot Fuzz"
Other inputs → span unchanged

var values = [ "Hot Fuzz", "Hot Fuzz 2", "hot fuzz", "Cold Fuzz", "Hot" ];

values.forEach( function( v ) {
  var $el = $( "<input>" ).attr( "value", v ).appendTo( "body" );
  console.log( v, "→", $el.is( "[value='Hot Fuzz']" ) ? "MATCH" : "no" );
  $el.remove();
});

Hot Fuzz → MATCH
Hot Fuzz 2 → no
hot fuzz → no
Cold Fuzz → no
Hot → no

var val = "Hot Fuzz 2";
var $input = $( "<input>" ).attr( "value", val ).appendTo( "body" );

console.log( "value:", val );
console.log( "='Hot Fuzz':", $input.is( "[value='Hot Fuzz']" ) );
console.log( "*='Hot Fuzz':", $input.is( "[value*='Hot Fuzz']" ) );

$input.remove();

value: Hot Fuzz 2
='Hot Fuzz': false
*='Hot Fuzz': true

Equals needs the full string; contains finds a substring

$( "input[type='submit']" ).prop( "disabled", true );

// Matches type="submit" exactly
// Does not match type="button" or type="reset"

Submit inputs → disabled
Button and reset inputs → unchanged

$( "#login-form input[name='username']" ).addClass( "highlight" );

// Matches name="username" inside #login-form
// Ignores username_confirm or fields in other forms

username in #login-form → class "highlight"
username_confirm and fields outside form → unchanged

🚀 Common Use Cases

• Input types — input[type='submit'], input[type='checkbox'].
• Field names — input[name='email'], textarea[name='message'].
• Option values — option[value='us'] for country dropdowns.
• Data attributes — [data-role='admin'] when the value is a fixed token.
• Link targets — a[target='_blank'] for external links.
• Radio groups — input[type='radio'][name='size'][value='large'].

📝 Notes

• Available since jQuery 1.0 — standard CSS attribute selector.
• Comparison is case-sensitive (per official jQuery docs).
• The entire attribute value must match — whitespace counts.
• Not the same as *= — substring anywhere vs full value only.
• Quote values with spaces: [value='Hot Fuzz'].
• Pair with element type and ID for performance: #form input[name='email'].

💡 Best Practices