如何使用jQuery选择匹配两个属性值的元素并选中对应复选框

解决方案 #

你使用的多属性并列匹配的选择器语法本身是符合规则的，无法生效主要是三个常见问题导致的，按下面的方案调整即可：

问题原因 #

• 未限定元素类型，可能匹配到同name、同value的非复选框元素，设置checked属性无效
• jQuery 1.6及以上版本中，操作表单元素的实际选中状态需要用prop()方法，attr()仅修改HTML静态属性，不会同步更新表单的交互状态
• 字符串拼接过程中如果变量含特殊字符，可能导致选择器语法报错

正确写法 #

方案1：优化选择器写法（推荐）

直接在选择器中同时限定类型、name、value三个属性，用ES6模板字符串避免拼接错误：

$(`input[type="checkbox"][name="${key}"][value="${value[i]}"]`).prop('checked', true);

如果不使用模板字符串，原拼接写法调整后也可以生效：

$('input[type="checkbox"][name="' + key + '"][value="' + value[i] + '"]').prop('checked', true);

方案2：filter筛选（适配变量含特殊字符的场景）

如果你的key或value变量中含有引号、方括号等特殊字符，用filter方法更稳妥，不会出现选择器语法错误：

$('input[type="checkbox"]').filter(function() {
  return $(this).attr('name') === key && $(this).val() === value[i];
}).prop('checked', true);

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