如何实现逐个勾选checkbox至最后一个时切换按钮为Unselect，取消时恢复

问题分析 #

现有代码仅判断当前点击的checkbox是否勾选就切换按钮，既没检查所有checkbox的整体勾选状态，也没处理取消勾选的场景，完全不符合需求逻辑。

修正后的实现代码 #

保留原HTML生成部分（确保所有checkbox都带.select类），重写selectDone函数，利用Prototype的API高效实现需求逻辑：

function selectDone(x) {
  // 批量获取所有带.select类的checkbox
  const checkboxes = $$('.select');
  // 统计已勾选的checkbox数量
  const checkedCount = checkboxes.filter(cb => cb.checked).length;
  // 获取两个按钮元素
  const selectBtn = $('button1');
  const unselectBtn = $('button2');

  // 判断是否所有checkbox都已勾选
  if (checkedCount === checkboxes.length) {
    unselectBtn.show();
    selectBtn.hide();
  } else {
    selectBtn.show();
    unselectBtn.hide();
  }
}

关键优化点 #

• 用Prototype的$$('.select')代替原生DOM方法批量获取checkbox，代码更简洁
• 通过filter统计已勾选数量，直接对比总数量判断是否全选，逻辑清晰
• 使用Prototype内置的show()/hide()方法替代原生style操作，符合框架使用习惯
• 同时覆盖勾选和取消勾选场景：只要不是全部勾选，就自动切回“Select”按钮

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