如何在 HTML 中实现'全选”复选框？

在 HTML 中实现“全选”复选框

在 Web 开发中，经常会遇到用户需要选择多个项目的情况从列表中。简化此过程的通用解决方案是实现“全选”复选框。勾选后，此复选框应自动选择页面上的所有其他复选框。

JavaScript 解决方案

要实现此功能，您可以使用 JavaScript。下面是演示实现的代码片段：

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
  }
}

HTML 集成

将 JavaScript 函数合并到您的 HTML 代码中，如下所示：

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br />

<input type="checkbox" name="foo" value="bar1" /> Bar 1<br />
<input type="checkbox" name="foo" value="bar2" /> Bar 2<br />
<input type="checkbox" name="foo" value="bar3" /> Bar 3<br />
<input type="checkbox" name="foo" value="bar4" /> Bar 4<br />

功能行为

何时“切换全部”复选框被选中，所有其他复选框将被选中。取消选中它将取消选择所有其他复选框。这使得用户只需单击一下即可快速选择或取消选择多个项目。

以上是如何在 HTML 中实现'全选”复选框？的详细内容。更多信息请关注PHP中文网其他相关文章！