jQuery - how to find an element with square brackets in its ID attr?

Question

I'm working with jQuery and I have this element:

<input class="css-checkbox" id="services[3492][selected]" name="services[3492][selected]" type="checkbox" value=" 1">

When I try to get that item in my console through its ID — services[3492][selected] — I get an empty response: [].

Code:

$('#services[3490][selected]') // Not working
$('[id*="services[3490][selected]"') // Working

I think it's because the [ characters. Maybe I need to sanitize, or use some escape characters or unicode transformation.

Answer 1

You need to escape the metacharacters( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) in jQuery selector using \\.

$('#services\\[3490\\]\\[selected\\]')

---

From jQuery selectors docs :

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.