html多选框div,用原生JS实现简单的多选框功能

好的，我可以帮你解决这个问题。以下是一种实现方法：

首先，在 HTML 中创建多选框的 div 元素，例如：

<div id="checkboxes">
  <input type="checkbox" value="option1" /> Option 1
  <input type="checkbox" value="option2" /> Option 2
  <input type="checkbox" value="option3" /> Option 3
</div>

然后，使用 JavaScript 代码获取多选框 div 元素和其中的所有复选框元素，以及为每个复选框元素添加点击事件监听器，以便在用户单击复选框时更新选中状态。代码如下：

var checkboxes = document.getElementById("checkboxes");
var checkboxInputs = checkboxes.getElementsByTagName("input");

for (var i = 0; i < checkboxInputs.length; i++) {
  var checkboxInput = checkboxInputs[i];
  checkboxInput.addEventListener("click", function() {
    updateCheckboxes();
  });
}

在事件监听器函数 updateCheckboxes() 中，可以获取选中的复选框值，并将它们存储在一个数组中。代码如下：

function updateCheckboxes() {
  var checkedValues = [];

  for (var i = 0; i < checkboxInputs.length; i++) {
    var checkboxInput = checkboxInputs[i];

    if (checkboxInput.checked) {
      checkedValues.push(checkboxInput.value);
    }
  }

  console.log(checkedValues);
}

最后，可以在控制台中查看选中的复选框值，也可以根据需要将它们用于其他操作。

完整的 HTML 和 JavaScript 代码如下：

<div id="checkboxes">
  <input type="checkbox" value="option1" /> Option 1
  <input type="checkbox" value="option2" /> Option 2
  <input type="checkbox" value="option3" /> Option 3
</div>

<script>
  var checkboxes = document.getElementById("checkboxes");
  var checkboxInputs = checkboxes.getElementsByTagName("input");

  for (var i = 0; i < checkboxInputs.length; i++) {
    var checkboxInput = checkboxInputs[i];
    checkboxInput.addEventListener("click", function() {
      updateCheckboxes();
    });
  }

  function updateCheckboxes() {
    var checkedValues = [];

    for (var i = 0; i < checkboxInputs.length; i++) {
      var checkboxInput = checkboxInputs[i];

      if (checkboxInput.checked) {
        checkedValues.push(checkboxInput.value);
      }
    }

    console.log(checkedValues);
  }
</script>