jQuery如何定位值包含双引号的复选框？

问题原因 #

1. 你的复选框value属性在HTML中写的是under 28"，浏览器解析后实际值为under 28"（&会被转译为&，最终得到表示双引号的HTML实体"），和你数组里的under 28"不匹配
2. 直接拼接选择器字符串时，空格、双引号这类特殊字符会破坏选择器语法，导致无法定位元素

解决方案 #

方法1：使用filter方法匹配（推荐）

避开选择器语法问题，直接遍历复选框并对比value属性：

let sizeArr = ['short', 'under 28"', 'over 28"'];
sizeArr.forEach(function(val) {
  // 将数组中的双引号转为HTML实体字符串，匹配DOM中的实际值
  const targetValue = val.replace(/"/g, '"');
  $(':checkbox').filter(function() {
    return this.value === targetValue;
  }).prop('checked', true);
});

方法2：修正属性选择器写法

用引号包裹value值，确保选择器语法正确：

let sizeArr = ['short', 'under 28"', 'over 28"'];
sizeArr.forEach(function(val) {
  const targetValue = val.replace(/"/g, '"');
  $(`:checkbox[value="${targetValue}"]`).prop('checked', true);
});

为什么之前的尝试失败？ #

你之前将数组中的双引号替换为"是错误的——HTML里的"会被浏览器解析成"，所以DOM中复选框的实际value是under 28"，而非你写的under 28"。

内容的提问来源于stack exchange，提问作者user19103974