HTML 多选框

在本文中，我们将介绍HTML中的多选框。多选框是HTML表单中常用的一个元素，允许用户选择多个选项。

阅读更多：HTML 教程

HTML 多选框的基本用法

HTML中的多选框使用<select>和<option>元素来创建。<select>元素定义了一个选项列表，而<option>元素定义了具体的选项。

以下是一个基本的多选框的示例：

<select multiple>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

多选框通过multiple属性来指示允许选择多个选项。用户可以通过按住Ctrl键（Windows）或Command键（Mac）来选择多个选项。选择的结果可以通过HTML表单提交到服务器端进行处理。

设置默认选中的选项

如果希望在页面加载时就设置默认选中的选项，可以通过设置selected属性来实现。例如：

<select multiple>
  <option value="apple" selected>苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange" selected>橙子</option>
</select>

上述示例中，”苹果”和”橙子”选项将会在页面加载时默认被选中。

获取用户选择的值

当用户选择了多个选项后，我们可以使用JavaScript或服务器端处理代码来获取用户选择的值。以下是一个使用JavaScript来获取多选框值的示例：

<select id="fruits" multiple>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

<button onclick="getSelectedFruits()">获取选中的水果</button>

<script>
function getSelectedFruits() {
  var selectElement = document.getElementById("fruits");
  var selectedFruits = [];
  for (var i = 0; i < selectElement.options.length; i++) {
    if (selectElement.options[i].selected) {
      selectedFruits.push(selectElement.options[i].value);
    }
  }
  console.log(selectedFruits);
}
</script>

上述示例中，当用户点击”获取选中的水果”按钮时，JavaScript代码会获取选中的水果值并在控制台输出。

自定义样式

我们可以使用CSS来自定义多选框的样式。通过设置background-color、color、font-size等属性，可以改变多选框的外观。

以下是一个自定义样式的示例：

<select style="background-color: #f2f2f2; color: #333;">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>