Baumann Baumann - 3 months ago 17
Javascript Question

How can I use jQuery to find an element with square brackets in its ID?

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 —
— I get an empty response:


$('#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.


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


From jQuery selecctors 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="", 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.