如何在HTML中實現「全選」複選框功能？

在HTML 中實現“全選”複選框功能

HTML 開發中的一個常見挑戰是透過使用“全選”複選框。此功能允許使用者方便、有效率地切換所有複選框的狀態。

要實現「全選」複選框，可以使用 JavaScript 函數。此函數應遍歷所有複選框並將其選取屬性設為「全選」複選框的值。以下是示範此方法的程式碼片段：

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

要將此功能整合到HTML 中，請新增一個標記為「切換全部」或「全選」的附加複選框，並使用調用toggle() 的onClick 事件處理程序功能。對於應受影響的每個複選框，為其名稱屬性指定相同的名稱（例如“foo”）。

<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頁面，增強使用者體驗並簡化選擇流程。

以上是如何在HTML中實現「全選」複選框功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！