如何为选中的复选框创建GET请求，然后将其显示在HTML页面上？

<input type="checkbox" id="checkbox1" class="checkbox">
<input type="checkbox" id="checkbox2" class="checkbox">
<input type="checkbox" id="checkbox3" class="checkbox">

function createGetRequest() {
  var checkboxes = document.getElementsByClassName("checkbox");
  var selectedValues = [];

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selectedValues.push(checkboxes[i].id);
    }
  }

  var url = "http://example.com/api?selected=" + selectedValues.join(",");
  return url;
}

<button onclick="displayGetRequest()">显示GET请求</button>
<p id="url"></p>

<script>
function displayGetRequest() {
  var url = createGetRequest();
  document.getElementById("url").innerHTML = url;
}
</script>