jQuery Multiple Attribute [name="value"][name2="value2"]

What You’ll Learn

The multiple attribute selector — written [filter1][filter2][filterN] — matches elements that satisfy every chained attribute filter. Each bracket narrows the set with AND logic. Combine presence, equals, prefix, suffix, and contains operators in one query — available since jQuery 1.0.

Introduction

Single attribute selectors are powerful on their own — but real pages often need elements that meet several attribute conditions at once. A checkbox named agree, a secure external link, or an email field marked required each needs more than one filter.

Chain attribute selectors back-to-back with no space between brackets: [attributeFilter1][attributeFilter2]. jQuery evaluates every filter and returns only elements that pass all of them. This pattern is standard CSS and has worked in jQuery since version 1.0.

Understanding Multiple Attribute Selectors

Think of each bracket as a gate. An element must pass through every gate to be selected. If it fails any single filter, it is excluded — even if it matched the others.

• name="newsletter", has id → [id][name$="letter"] matches.
• name="newsletter", no id → [id][name$="letter"] does not match (missing id).
• type="checkbox", name="agree" → [type="checkbox"][name="agree"] matches.
• type="checkbox", name="subscribe" → [type="checkbox"][name="agree"] does not match.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )
// shorthand:
$( "[attributeFilter1][attributeFilter2][attributeFilterN]" )

// common patterns:
$( "input[id][name$='man']" )
$( "a[href^='https'][target='_blank']" )
$( "input[type='checkbox'][name='agree']" )

Parameters

• attributeFilter1…N — any valid CSS attribute selector: presence ([name]), exact ([type="text"]), prefix ([href^="https"]), suffix ([name$="pdf"]), contains ([class*="btn"]), etc.
• Chaining — no space or comma between brackets; each additional filter applies AND logic.

Return value

• A jQuery object containing every element that satisfies all specified attribute filters.
• Empty collection when no element passes every filter.

Official jQuery API example

$( "input[id][name$='man']" ).val( "only this one" );

// Matches inputs that HAVE an id attribute
// AND whose name value ENDS WITH "man"
// Skips inputs with name ending in "man" but no id

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 cover checkbox fields, secure external links, single vs chained narrowing, and scoped form queries. Use the Try-it links to run each snippet.

$( "input[id][name$='man']" ).val( "only this one" );

// Matches: <input id="hero" name="superman">
// Skips: <input name="superman"> (no id)
// Skips: <input id="x" name="manual"> (name does not end with man)

input id="hero" name="superman" → value "only this one"
input name="superman" (no id) → unchanged
input id="x" name="manual" → unchanged

$( "input[type='checkbox'][name='agree']" ).prop( "checked", true );

// Matches type="checkbox" AND name="agree"
// Skips text inputs named agree or other checkboxes

checkbox name="agree" → checked
checkbox name="newsletter" → unchanged
hidden input name="agree" → unchanged

$( "a[href^='https'][target='_blank']" ).addClass( "external-secure" );

// Matches href starting with https AND target="_blank"
// Skips http links or same-tab https links

https + target="_blank" → class "external-secure"
http + target="_blank" → unchanged
https same-tab link → unchanged

var single = $( "input[name$='man']" ).length;
var chained = $( "input[id][name$='man']" ).length;

console.log( "name$='man' only:", single );
console.log( "id AND name$='man':", chained );
console.log( "Chained is more specific → fewer matches" );

name$='man' only: 3
id AND name$='man': 1

Adding [id] excludes inputs without an id attribute

$( "form#signup input[type='email'][required]" ).addClass( "highlight" );

// Matches email type AND required attribute inside #signup
// Ignores optional email fields or emails in other forms

required email in #signup → class "highlight"
optional email in #signup → unchanged
required email in other forms → unchanged

🚀 Common Use Cases

• Form fields — input[type='checkbox'][name='agree'], input[type='email'][required].
• Secure links — a[href^='https'][target='_blank'] for external HTTPS tabs.
• File inputs — input[type='file'][accept*='image'] combining type and accept.
• Radio groups — input[type='radio'][name='size'][value='large'] with three chained filters.
• Data attributes — [data-role='admin'][data-active='true'] for compound state.
• Narrow suffix matches — input[id][name$='man'] when suffix alone is too broad.

📝 Notes

• Available since jQuery 1.0 — standard CSS multiple attribute selector.
• Chained brackets use AND logic — not OR. Use commas for OR.
• Order of brackets does not change which elements match.
• Mix any operators: [id], [type="text"], [name$="pdf"], [href^="https"].
• More filters mean a smaller, more specific result set.
• Pair with element type and container IDs for performance: form#signup input[type='email'][required].

💡 Best Practices