javascript - 查询数值选择器时出错

Question

我正在尝试使用查询选择器(不使用 jquery)设置过滤器组件的复选框值。如果元素的值是字符串，则查询选择成功，但如果它是数字，则查询选择失败。

<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

您可以使用 " 作为选择器的值:[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;
})