如何在普通 JavaScript 中实现多输入复选框？

1. 多输入复选框是什么？

在表单中，复选框是一种常见的选项，它允许用户从多个选项中选择一个或多个选项，复选框为用户提供了方便、可定制和易于使用的界面，但在普通的 JavaScript 中，默认情况下只能获取到复选框选中或未选中的状态，如果需要获取某个复选框的值，需要遍历整个复选框列表，这样的做法十分麻烦和低效，因此需要一种简单的方法来处理复选框。

2. 实现多输入复选框的方法

2.1 使用原生 JavaScript

在原生 JavaScript 中，我们可以通过以下步骤来实现多输入复选框：

获取所有复选框的列表

循环列表中的每个复选框

检查复选框是否被选中

如果选中，则将选中的复选框的值添加到结果数组中

返回结果数组

以下是使用原生 JavaScript 实现多输入复选框的示例代码：

function getCheckedCheckboxes() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var checkedCheckboxes = [];
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      checkedCheckboxes.push(checkboxes[i].value);
    }
  }
  return checkedCheckboxes;
}

该函数将返回一个数组，包含所有已选中的复选框的值。

2.2 使用 jQuery

如果您使用 jQuery，可以使用以下代码来获取所有已选中的复选框的值：

function getCheckedCheckboxes() {
  var checkedCheckboxes = [];
  $('input[type="checkbox"]:checked').each(function() {
    checkedCheckboxes.push($(this).val());
  });
  return checkedCheckboxes;
}

该函数将返回一个数组，包含所有已选中的复选框的值。

3. 实现数字复选框的方法

数字复选框指的是复选框颜色和字体大小等样式可以自定义，并且可以选择多个元素，以下是一个实现数字复选框的方法:

HTML结构如下：

<label class="checkbox-container">
  <input type="checkbox" value="1">
  <span class="checkmark">1</span>
</label>

CSS样式如下：

.checkbox-container {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  margin: 10px;
}
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: #fff;
  border: 2px solid #cfcfcf;
  border-radius: 50%;
  text-align: center;
  color: #cfcfcf;
  font-size: 16px;
}
.checkbox-container input:checked ~ .checkmark {
  background-color: #008c00;
  border: none;
  color: #fff;
}

JavaScript代码如下：

function updateCheckbox(e) {
  var checkboxEls = document.querySelectorAll(".checkbox-container input[type=checkbox]");
  var checkedElms = [];
  checkboxEls.forEach(function(checkboxElm) {
      if (checkboxElm.checked) {
          checkedElms.push(checkboxElm.value);
      }
  });
  console.log(checkedElms);
}
document
  .querySelectorAll(".checkbox-container input[type=checkbox]")
  .forEach(function(checkboxElm) {
    checkboxElm.addEventListener("change", updateCheckbox);
  });

该代码会创建一个数字复选框，并且点击选择的时候会记录下选择的值，从而获得多个元素的选择状态和值。

4. 小结

在 JavaScript 中，实现多输入复选框可以通过原生 JavaScript 或 jQuery 来实现，可以通过遍历复选框的列表来检查选择状态并获取选择的值。

数字复选框可以自定义样式，通过JavaScript获取多选框的值，并记录多个元素的选择状态与值。