Baumann Baumann - 1 month ago 6
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 —
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

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

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


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="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.