如何在多选框中显示我选择过的元素？

在多选框中显示已选择的元素，可以通过以下步骤实现：

创建一个多选框列表，其中包含所有可选的元素。
给每个多选框元素添加一个事件监听器，当选中或取消选中时触发。
在事件监听器中，检查每个多选框元素的选中状态。如果选中，则将该元素添加到一个已选择的元素列表中；如果取消选中，则从已选择的元素列表中移除该元素。
将已选择的元素列表显示在页面上，可以使用一个文本框或一个标签来展示。
当用户进行选择操作时，更新已选择的元素列表并更新显示。

以下是一个示例代码，演示如何在多选框中显示已选择的元素：

<!DOCTYPE html>
<html>
<head>
  <title>显示已选择的元素</title>
  <script>
    // 创建一个空数组，用于存储已选择的元素
    var selectedElements = [];

    // 事件监听器，当多选框选中状态改变时触发
    function handleCheckboxChange(checkbox) {
      var element = checkbox.value;

      // 检查多选框的选中状态
      if (checkbox.checked) {
        // 如果选中，则将元素添加到已选择的元素列表中
        selectedElements.push(element);
      } else {
        // 如果取消选中，则从已选择的元素列表中移除元素
        var index = selectedElements.indexOf(element);
        if (index > -1) {
          selectedElements.splice(index, 1);
        }
      }

      // 更新显示已选择的元素列表
      var selectedElementsText = document.getElementById('selectedElements');
      selectedElementsText.textContent = selectedElements.join(', ');
    }
  </script>
</head>
<body>
  <h1>多选框示例</h1>
  <p>请选择以下元素：</p>
  <input type="checkbox" value="元素1" onchange="handleCheckboxChange(this)"> 元素1<br>
  <input type="checkbox" value="元素2" onchange="handleCheckboxChange(this)"> 元素2<br>
  <input type="checkbox" value="元素3" onchange="handleCheckboxChange(this)"> 元素3<br>
  <input type="checkbox" value="元素4" onchange="handleCheckboxChange(this)"> 元素4<br>
  <br>
  <p>已选择的元素：</p>
  <p id="selectedElements"></p>
</body>
</html>

在上述示例中，我们创建了一个多选框列表，用户可以选择其中的元素。每个多选框元素都绑定了一个事件监听器handleCheckboxChange，当选中状态改变时会触发该函数。在函数中，我们根据多选框的选中状态，将选中的元素添加到selectedElements数组中或从数组中移除。最后，我们将已选择的元素列表显示在页面上的selectedElements标签中。

这只是一个简单的示例，实际应用中可以根据需求进行定制和扩展。