在数值上查询选择器时出错答案

【问题标题】：Error while query selector on numeric value在数值上查询选择器时出错
【发布时间】：2018-05-11 17:51:44
【问题描述】：

我正在尝试使用查询选择器（不带 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;
 })

未捕获的 DOMException：无法在“文档”上执行“querySelector”：“input[name=storage][value=16]”不是有效的选择器。

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

【问题讨论】：

stackoverflow.com/questions/20306204/…的可能重复

标签： javascript html dom

【解决方案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;
})

【讨论】：

谢谢@stephanen & Quentin

【解决方案2】：

见the specification:

属性值必须是 CSS 标识符或字符串。

在 CSS 中，标识符（包括元素名称、类和 ID）选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_); 不能以数字开头、两个连字符或后跟一个连字符一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（参见下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

16 以数字开头，因此它（与 manufacturer、apple 和 storage 不同）不能是标识符。

字符串可以用双引号或单引号书写。

16 不是用其中任何一个写的，所以它不是字符串。

您需要引用数字。

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

【讨论】：