如何在一个人选中3个复选框后解锁按钮？

在前端开发中，可以通过以下步骤实现在一个人选中3个复选框后解锁按钮的功能：

HTML结构：创建一个包含3个复选框和一个解锁按钮的表单。给每个复选框添加一个事件监听器，当复选框被选中或取消选中时触发相应的事件。

<form>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">复选框1</label>
  <br>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">复选框2</label>
  <br>
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3">复选框3</label>
  <br>
  <button id="unlockButton" disabled>解锁按钮</button>
</form>

JavaScript逻辑：使用JavaScript监听复选框的变化，并根据选中的复选框数量来控制解锁按钮的状态。

// 获取复选框和解锁按钮的引用
const checkbox1 = document.getElementById('checkbox1');
const checkbox2 = document.getElementById('checkbox2');
const checkbox3 = document.getElementById('checkbox3');
const unlockButton = document.getElementById('unlockButton');

// 监听复选框的变化
checkbox1.addEventListener('change', updateButtonStatus);
checkbox2.addEventListener('change', updateButtonStatus);
checkbox3.addEventListener('change', updateButtonStatus);

// 更新解锁按钮的状态
function updateButtonStatus() {
  // 获取选中的复选框数量
  const checkedCount = document.querySelectorAll('input[type="checkbox"]:checked').length;

  // 如果选中的复选框数量达到3个，则解锁按钮可用，否则禁用解锁按钮
  if (checkedCount === 3) {
    unlockButton.disabled = false;
  } else {
    unlockButton.disabled = true;
  }
}