checkbox可不可以做成按钮的类型，点他就变亮，代表选择，再点一下就变暗，代表不选择

可以的，checkbox在HTML中通常是用于勾选或取消勾选的选择功能，但通过一些CSS样式和JavaScript操作，可以模拟类似按钮的视觉反馈，即点击后改变样式表示是否被选中。以下是一种简单的实现方式：

首先，HTML部分保持不变，使用一个普通的checkbox：

<input type="checkbox" id="toggleButton" />
<label for="toggleButton">点击选择</label>

然后，用CSS给它添加一些基础的交互样式：

input[type="checkbox"] {
  display: none;
}
label {
  padding: 8px 16px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

label:hover {
  background-color: #f0f0f0;
}

label input:checked + label {
  background-color: #007bff;
}

最后，使用JavaScript添加点击事件监听器，以便于控制样式：

const toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("change", function() {
  this.parentNode.style.backgroundColor =
    this.checked ? "blue" : "transparent";
});

以上代码中，当checkbox被选中时，其关联的label标签会变为蓝色；取消选择时，恢复透明背景。这只是一个基本的示例，实际应用中可能还需要处理更复杂的用户交互和验证。