如何添加全选复选框，并为显示的每个选项添加复选框？

<input type="checkbox" id="selectAll">全选<br>
<ul id="optionList">
  <li><input type="checkbox">选项1</li>
  <li><input type="checkbox">选项2</li>
  <li><input type="checkbox">选项3</li>
  <li><input type="checkbox">选项4</li>
</ul>

// 获取全选复选框和选项列表
var selectAllCheckbox = document.getElementById("selectAll");
var optionList = document.getElementById("optionList").getElementsByTagName("input");

// 给全选复选框绑定点击事件
selectAllCheckbox.addEventListener("click", function() {
  var isChecked = selectAllCheckbox.checked;

  // 设置每个选项的复选框与全选复选框状态一致
  for (var i = 0; i < optionList.length; i++) {
    optionList[i].checked = isChecked;
  }
});

// 给每个选项的复选框绑定点击事件
for (var i = 0; i < optionList.length; i++) {
  optionList[i].addEventListener("click", function() {
    var allChecked = true;

    // 检查是否所有选项都被选中
    for (var j = 0; j < optionList.length; j++) {
      if (!optionList[j].checked) {
        allChecked = false;
        break;
      }
    }

    // 如果所有选项都被选中，则设置全选复选框为选中状态；否则取消选中状态
    selectAllCheckbox.checked = allChecked;
  });
}