Baumann Baumann - 1 year ago 82
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download