如何在JavaScript中通过点击带tag属性的span取消选中对应动态值的复选框？

你遇到的核心问题是选择器里的变量没有被正确解析，同时还有一个细节错误，下面直接给出修正方案和原因说明：

错误原因 #

1. 选择器$(":checkbox[value=t]")里的t是字符串字面量，不是你定义的变量，jQuery会去匹配value等于"t"的复选框，自然找不到目标元素。
2. prop("checked", "false")传入的是字符串"false"，jQuery会把非空字符串判定为true，所以根本不会取消选中，必须传入布尔值false。

修正后的代码 #

基础修复版本 #

$(document).on('click', '.clear-tags', function() {
  var t = $(this).attr('tag');
  // 通过字符串拼接把变量t插入选择器
  $(":checkbox[value='" + t + "']").prop("checked", false);
});

更简洁的ES6版本 #

如果你的环境支持ES6，用模板字符串会更清晰：

$(document).on('click', '.clear-tags', function() {
  const t = $(this).attr('tag');
  $(`:checkbox[value='${t}']`).prop("checked", false);
});

更规范的优化建议 #

HTML里的自定义属性推荐使用data-*规范（符合W3C标准），把tag属性改成data-tag，获取的时候用data()方法更方便：

修改后的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags-res">
  <span class="clear-tags" data-tag="wb=38"></span>
  <span class="clear-tags" data-tag="attr=33|998"></span>
</div>

对应的JS代码

$(document).on('click', '.clear-tags', function() {
  const t = $(this).data('tag');
  $(`:checkbox[value='${t}']`).prop("checked", false);
});

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