jQuery实现checkbox关联数组push/pop、去重及独立div渲染问题求助

核心修正思路 #

• 替换原无差别push的逻辑：根据复选框的实际勾选/取消状态，分别执行数组的新增、移除操作，从根源避免空值混入数组
• 重复值拦截：新增数组项前先校验是否已存在对应值，保证数组无冗余数据
• 重构展示渲染逻辑：替代原直接输出数组字符串的写法，为每个有效勾选值生成独立的展示div

可直接运行的完整代码 #

修正后JS逻辑 #

// 初始化存储有效勾选值的数组
let listvalues = [];
// 绑定所有复选框的状态变更事件
$('.check').on('change', function() {
  const currentValue = this.value;
  const checkedStatus = this.checked;

  if (checkedStatus) {
    // 勾选状态：仅当数组中不存在当前值时才执行push操作
    if (!listvalues.includes(currentValue)) {
      listvalues.push(currentValue);
    }
  } else {
    // 取消勾选状态：从数组中精准过滤移除对应值
    listvalues = listvalues.filter(item => item !== currentValue);
  }

  // 重构展示区域渲染逻辑
  const $showContainer = $('#show');
  $showContainer.empty(); // 先清空原有展示内容
  // 遍历有效数组值，生成独立展示div
  listvalues.forEach(item => {
    $showContainer.append(`<div class="display-item">当前选中值：${item}</div>`);
  });
});

配套HTML结构 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>

<!-- 复选框选择组 -->
<input type="checkbox" class="check" value="1" />选项1
<input type="checkbox" class="check" value="2" />选项2
<input type="checkbox" class="check" value="3" />选项3
<input type="checkbox" class="check" value="4" />选项4

<!-- 结果展示区域 -->
<div id="show"></div>

原问题匹配解决说明 #

1. 解决无差别push的bug：原代码无论勾选状态为true还是false都执行push操作，现在通过状态判断做分支处理，取消勾选时直接执行数组移除逻辑，不会再把空字符串、重复值存入数组
2. 解决独立展示div缺失的问题：原代码直接将数组赋值给html()方法，会渲染成逗号拼接的扁平字符串，现在每次数组变更后都会重新遍历生成独立的div节点，满足展示需求

注意：原需求提到的pop操作仅适用于“固定取消最后一次勾选项”的固定流程，如果用户随机取消任意位置的复选框，用filter精准匹配移除对应值的方案才是全场景适配的，不会出现数组项错位的问题。

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