如何在 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中文網其他相關文章！