Match input with multiple attributes selector

Question

I have an input element:

<input type='checkbox' name='abc' />

How can I select it with querySelector using both attributes?

I have tried the following query:

input[name="abc", type="checkbox"]

But unfortunately an error appeared:

Failed to execute 'querySelector' on...

Answer 1

You need to enclose each individual property/attribute with it's own square brackets.

input[name="abc"][type="checkbox"]

console.log(document.querySelector('input[type="checkbox"][name="abc"]'));

<input type='checkbox' name='abc' />