用 Javascript 验证表单(form)中多选框(checkbox)值

下面是用 Javascript 验证表单中多选框值的攻略：

1. HTML 布局

首先，我们需要在 HTML 中布局多选框。

<form>
  <div>
    <label>
      <input type="checkbox" name="fruit" value="apple"> Apple
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="fruit" value="banana"> Banana
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="fruit" value="orange"> Orange
    </label>
  </div>
  <button type="submit">Submit</button>
</form>

在这个表单中，有三个选项，每个选项都有一个相同的 name 属性：“fruit”，用于将这些选项分组。其中，每个选项的值分别是“apple”、“banana”和“orange”。

2. 验证多选框是否至少选中一个选项

我们可以使用 Javascript 来验证多选框是否至少选中一个选项。首先，在 HTML 中为提交按钮添加一个单击事件处理程序，以便在单击按钮时触发验证。

<button type="submit" onclick="return validateForm()">Submit</button>

接下来，在 Javascript 中实现 validateForm() 函数。

function validateForm() {
  var checkboxes = document.getElementsByName("fruit");
  var checked = false;
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      checked = true;
      break;
    }
  }
  if (!checked) {
    alert("Please select at least one fruit.");
    return false;
  }
  return true;
}

在函数中，我们首先通过 document.getElementsByName() 获取所有 name 属性为“fruit”的多选框。然后，我们使用一个循环来遍历每个多选框，并检查它是否被选中。如果至少有一个被选中，我们将 checked 设置为 true，然后跳出循环。最后，我们检查 checked 是否为 false，如果是，则显示一个警告框并返回 false，否则返回 true。

3. 验证多选框是否满足一些特定值

我们也可以使用 Javascript 来验证多选框是否满足一些特定值。例如，我们只想让用户选择“apple”和“orange”。

function validateForm() {
  var checkboxes = document.getElementsByName("fruit");
  var validValues = ["apple", "orange"];
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked && validValues.indexOf(checkboxes[i].value) === -1) {
      alert("Please select \"Apple\" or \"Orange\" only.");
      return false;
    }
  }
  return true;
}

在这个函数中，我们仍然先获取所有 name 属性为“fruit”的多选框。我们还定义了一个数组 validValues，它包含了我们允许用户选择的值。接下来，我们遍历每个多选框，如果当前多选框被选中并且它的值不在 validValues 中，我们将显示一个警告框并返回 false。否则，我们继续遍历。

希望以上示例能帮助你理解如何用 Javascript 验证表单中多选框的值。