多选框html详解

发布时间：2023-05-18

一、多选框代码

多选框是一个常见的 HTML 表单元素，它可以让用户在多个选项中进行选择。多选框的代码主要由 input 元素和 type="checkbox" 属性组成，如下所示：

<input type="checkbox" name="fruits" value="apple">苹果
<input type="checkbox" name="fruits" value="banana">香蕉
<input type="checkbox" name="fruits" value="orange">橙子

上面的代码表示一个包含三个选项的多选框，它们的 name 属性都是 fruits，value 属性分别为 apple、banana 和 orange。

二、多选框英文

多选框的英文单词是 checkbox，在 HTML 中，它经常和单选框（radio）一起使用，用来生成复杂的表单。

三、多选框标签

多选框在 HTML 中的标签是 input，它有多种类型，其中 type="checkbox" 表示它是一个多选框。

四、多选框默认全选

多选框默认状态下是全部选中的，如果需要指定哪些选项被选中，可以使用 checked 属性，如下所示：

<input type="checkbox" name="fruits" value="apple" checked>苹果
<input type="checkbox" name="fruits" value="banana">香蕉
<input type="checkbox" name="fruits" value="orange" checked>橙子

上面的代码表示苹果和橙子默认选中，香蕉默认未选中。

五、多选框的实现

多选框可以通过 JavaScript 来实现全选、取消全选等功能，具体实现方法如下：

<form>
  <input type="checkbox" name="option1" value="1">选项1
  <input type="checkbox" name="option2" value="2">选项2
  <input type="checkbox" name="option3" value="3">选项3
  <input type="button" value="全选" onclick="selectAll()">
  <input type="button" value="取消全选" onclick="deselectAll()">
</form>
<script>
function selectAll() {
  var checkboxes = document.getElementsByName("option");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
}
function deselectAll() {
  var checkboxes = document.getElementsByName("option");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = false;
  }
}
</script>

六、多选框被选择事件一般用

多选框被选择事件一般使用 onchange 事件，该事件会在多选框状态改变时触发，可以通过此事件来实现特定功能，如下所示：

<form>
  <input type="checkbox" name="option1" value="1" onchange="updateSelection()">选项1
  <input type="checkbox" name="option2" value="2" onchange="updateSelection()">选项2
  <input type="checkbox" name="option3" value="3" onchange="updateSelection()">选项3
</form>
<script>
function updateSelection() {
  var checkboxes = document.getElementsByName("option");
  var selection = "";
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selection += checkboxes[i].value + " ";
    }
  }
  alert("当前选项为：" + selection);
}
</script>

上面的代码表示当多选框的选择状态发生改变时，会触发 updateSelection 函数，该函数会获取当前选中的选项值，并通过 alert 方法将其弹出。

七、多选框选中事件

多选框选中事件与单选按钮选中事件不同，它不能直接使用 onclick 事件，而是要使用 onchange 事件，如下所示：

<form>
  <input type="checkbox" name="option1" value="1" onchange="updateSelection()">选项1
  <input type="checkbox" name="option2" value="2" onchange="updateSelection()">选项2
  <input type="checkbox" name="option3" value="3" onchange="updateSelection()">选项3
</form>
<script>
function updateSelection() {
  var checkboxes = document.getElementsByName("option");
  var selection = "";
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selection += checkboxes[i].value + " ";
    }
  }
  alert("当前选项为：" + selection);
}
</script>

八、HTML 多选按钮属性

除了 name 和 value 属性外，多选框还可以设置其他属性，如 disabled 属性表示禁用多选框，如下所示：

<input type="checkbox" name="option1" value="1" disabled>选项1
<input type="checkbox" name="option2" value="2">选项2
<input type="checkbox" name="option3" value="3" disabled>选项3

上面的代码表示选项 1 和选项 3 被禁用，无法进行选择。

九、HTML 表单多选

多选框是 HTML 表单中常用的一种元素，它可以用来收集用户的选择信息，如下所示：

<form>
  <input type="checkbox" name="option1" value="1">选项1
  <input type="checkbox" name="option2" value="2">选项2
  <input type="checkbox" name="option3" value="3">选项3
  <input type="submit" value="提交">
</form>

上面的代码表示一个包含三个选项的多选框表单，用户可以选择多个选项并提交表单。

十、HTML 实现多选下拉框选取

如果需要在多选框中显示下拉框样式，可以使用 select 和 option 标签来实现，如下所示：

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

上面的代码表示一个包含三个选项的多选下拉框，在下拉框样式的列表中用户可以选择多个选项。

推荐文章