Error while query selector on numeric value

Question

I am trying to set checkbox value for a filter component using query selector (without jquery). If the value for the element is string then query selection is success howeve

Answer 1

You might use " for the value of your selector : [key="value"]

document.querySelector('button').addEventListener('click',function(){
  document.querySelector('input[name="manufacturer"][value="apple"]').checked = true;
  document.querySelector('input[name="storage"][value="16"]').checked = true;
})

Answer 2

See the specification:

Attribute values must be CSS identifiers or strings.

---

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

16 starts with a digit, so it (unlike manufacturer, apple and storage) cannot be an identifier.

---

Strings can either be written with double quotes or with single quotes.

16 is not written with either of those, so it isn't a string.

---

You need to quote the number.

document.querySelector('input[name=storage][value="16"]')