如何为含1-25选项的下拉列表添加复选框替代多选功能？

完全可以实现，直接把原有的<select multiple>组件替换成一组复选框即可，同时调整对应的JavaScript逻辑来获取选中值，以下是具体代码：

1. 修改HTML结构 #

将原来的下拉列表替换为复选框组，用循环生成1-25的选项更简洁，同时设置name="affectedwaferid[]"确保后端能正确接收多选值：

<div id="afwid">
  <label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID : <span id="selected-result"></span></label>
  <div class="col-sm-4">
    <p class="form-control-static" style="margin-top: -6px;">
      <!-- 替换为复选框组 -->
      <?php for ($i = 1; $i <= 25; $i++) : ?>
        <div class="checkbox-inline">
          <input type="checkbox" id="wafer-<?= $i ?>" name="affectedwaferid[]" value="<?= $i ?>">
          <label for="wafer-<?= $i ?>"><?= $i ?></label>
        </div>
      <?php endfor; ?>
    </p>
  </div>
</div>

如果不需要PHP循环，也可以手动写出每个复选框，示例如下：

<div class="checkbox-inline">
  <input type="checkbox" id="wafer-1" name="affectedwaferid[]" value="1">
  <label for="wafer-1">1</label>
</div>
<!-- 重复编写2-25对应的复选框代码 -->

2. 更新JavaScript逻辑 #

原来的JS是针对下拉框的，现在需要改为监听复选框的change事件，获取所有选中的复选框值并更新展示：

// 给所有复选框绑定change事件
document.querySelectorAll('input[name="affectedwaferid[]"]').forEach(checkbox => {
  checkbox.addEventListener('change', updateSelectedResult);
});

// 页面初始化时执行一次，确保展示正确
updateSelectedResult();

function updateSelectedResult() {
  // 获取所有被选中的复选框
  const selectedCheckboxes = document.querySelectorAll('input[name="affectedwaferid[]"]:checked');
  // 提取选中的值
  const affectedwf = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);
  // 更新页面展示的选中结果
  document.getElementById("selected-result").innerHTML = affectedwf.join(', ');
}

额外说明 #

• 复选框组的name设置为affectedwaferid[]，后端接收时会以数组形式获取所有选中的值，和原下拉框的多选提交逻辑一致
• 可以通过CSS调整复选框的排列样式（比如每行显示固定数量），提升页面美观度
• 如果需要“全选/取消全选”功能，可以额外添加一个全选复选框，再补充对应的JS逻辑实现批量选择

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