javascript - 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 however if it is a numeric it fails.

<div>
  <span>Manufacturer</span>
   <label>
   <input type="checkbox" name="manufacturer" value="apple">Apple</label>
</div>

<div>
  <span>Screen Size</span>
   <label>
   <input type="checkbox" value="16" name="storage">16 GB</label>
</div>
<button>Select</button>


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

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'input[name=storage][value=16]' is not a valid selector.

https://jsfiddle.net/byqwsdog/1/

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;
})