form 表单获取checkbox数据

在 HTML 中，checkbox 是一种 input 类型，用于让用户选择一项或多项选项。当用户提交包含 checkbox 的表单时，需要获取用户所选的值。

可以通过以下方式来获取 checkbox 的值：

1. 使用 JavaScript：

<form>
  <input type="checkbox" name="fruit" value="apple"> Apple<br>
  <input type="checkbox" name="fruit" value="banana"> Banana<br>
  <input type="checkbox" name="fruit" value="orange"> Orange<br>
  <button onclick="getCheckboxValue()">Submit</button>
</form>

<script>
function getCheckboxValue() {
  var checkboxes = document.getElementsByName("fruit");
  var values = [];
  for (var i=0; i<checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      values.push(checkboxes[i].value);
    }
  }
  console.log(values);
}
</script>

在此示例中，我们使用了 `document.getElementsByName()` 方法来获取所有名称为 "fruit" 的 checkbox 元素，然后使用 `for` 循环遍历所有 checkbox，如果 checkbox 被选中，则将它的值添加到数组中。最后，我们将数组打印到控制台。

2. 使用 jQuery：

<form>
  <input type="checkbox" name="fruit" value="apple"> Apple<br>
  <input type="checkbox" name="fruit" value="banana"> Banana<br>
  <input type="checkbox" name="fruit" value="orange"> Orange<br>
  <button id="submit-btn">Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#submit-btn").click(function() {
  var values = [];
  $("input[name='fruit']:checked").each(function() {
    values.push($(this).val());
  });
  console.log(values);
});
</script>

在此示例中，我们使用 jQuery 的选择器来获取所有名称为 "fruit" 的 checkbox 元素，并使用 `each()` 方法遍历所有选中的 checkbox。然后，我们将它们的值添加到数组中，并将数组打印到控制台。