如何筛选ID为colour的复选框值并构建字符串填充文本框

首先得提个小误区：HTML里的id属性是唯一标识，不能给一批复选框都设置id="colour"哦，你大概率是想给这些目标复选框设置相同的name属性（比如name="colour"），或者给它们加上同一个class（比如class="colour"），这样才能批量选中它们。

回到你的问题，之前的代码之所以会混入其他复选框的值，核心问题是你用了$(":checkbox")这个选择器——它会选中页面上所有复选框，不管是不是你想要的那批。要解决这个问题，关键是精准定位到目标复选框，只处理它们的选中状态。

方案1：如果目标复选框的name是colour（最常用场景） #

直接修改选择器，只选中name="colour"的复选框，然后监听它们的变化事件：

// 监听所有name为colour的复选框的状态变化
$(":checkbox[name='colour']").on('change', function() {
  // 直接获取所有选中的目标复选框的值，转为数组
  var selectedVals = $(":checkbox[name='colour']:checked").map(function() {
    return $(this).val();
  }).get();
  // 把数组转成逗号分隔的字符串，填充到文本框
  $('#result-text-colour').text(selectedVals.join(", "));
});

方案2：如果目标复选框有共同的class（比如class="colour"） #

把选择器换成.colour即可，逻辑和上面一致：

$(":checkbox.colour").on('change', function() {
  var selectedVals = $(":checkbox.colour:checked").map(function() {
    return $(this).val();
  }).get();
  $('#result-text-colour').text(selectedVals.join(", "));
});

方案3：如果目标复选框都在ID为colour的容器里 #

比如这些复选框都放在<div id="colour">...</div>这类容器中，那可以通过容器来筛选：

$("#colour :checkbox").on('change', function() {
  var selectedVals = $("#colour :checkbox:checked").map(function() {
    return $(this).val();
  }).get();
  $('#result-text-colour').text(selectedVals.join(", "));
});

为什么你之前的代码失效？ #

你之前加的if (checkboxElementClicked == 'colour')其实意义不大——如果是单个复选框的id为colour，那你只能处理这一个复选框，而不是一批。而且就算判断了，后面遍历的还是所有复选框，其他复选框的选中值自然会混进来。

另外，用.map()和.get()来获取选中值的写法比手动循环更简洁，是jQuery里常用的小技巧哦。

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