将复选框值获取到div html

<input type="checkbox" id="checkbox1" value="Value 1"> Value 1
<input type="checkbox" id="checkbox2" value="Value 2"> Value 2
<input type="checkbox" id="checkbox3" value="Value 3"> Value 3

<div id="result"></div>

// 获取复选框元素
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");

// 获取目标div元素
var resultDiv = document.getElementById("result");

// 监听复选框的变化事件
checkbox1.addEventListener("change", updateResult);
checkbox2.addEventListener("change", updateResult);
checkbox3.addEventListener("change", updateResult);

// 更新目标div的内容
function updateResult() {
  // 清空目标div的内容
  resultDiv.innerHTML = "";

  // 检查每个复选框的状态，并将选中的值添加到目标div中
  if (checkbox1.checked) {
    resultDiv.innerHTML += checkbox1.value + "<br>";
  }
  if (checkbox2.checked) {
    resultDiv.innerHTML += checkbox2.value + "<br>";
  }
  if (checkbox3.checked) {
    resultDiv.innerHTML += checkbox3.value + "<br>";
  }
}

#result {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}